页脚不会触及底部，如果绝对，它会隐藏内容？

问题描述 投票：-1回答：2

所以我的页脚没有触及页面底部。当我将其设置为position：absolute时，它会隐藏页面内容，而我无法向下滚动。我可以以某种方式将正文内容设置为不超过页脚吗？还是强迫页脚停留在下面？ （由于其中大部分是图片，因此我没有将自己的身体包含在摘要中）

.footer {
	position: relative;
    bottom: 0px;
    left: 0px;
    right: 0px;
    padding: 0px;
    width: 100%;
    background-color: #F9F9F9;
    text-align: center;
	box-shadow: inset 0 4px 5px 0 rgba(0, 0, 0, 0.2);
    /*outline: 2px dashed orange;*/
}
.footerline {
    padding: 80px;
    display: flex;
    font-family: 'Source Code Pro', monospace;
    font-style: normal;
    font-weight: 200;
    font-size: 15px;
    color: #D5D5D5;
    justify-content: center;
    align-items: center;
    /*outline: 2px dashed orange;*/
}
#footerlineshadow {
	color: rgba(240,240,240, 0.9);
    text-shadow: 1px 1px 1px #fff, 0 0 0 #000, 1px 1px 1px #fff;
}
<body>
content here
</body>
<footer class="footer">
	  <div class="footerline">
	    <p id= footerlineshadow>&ltp&gtThis is a Footer&lt/p&gt</p>
      </div>
</footer>
html css
2个回答
0
投票

如果您确实希望页脚保持在固定位置以下并且根本不滚动，则应在页脚中使用position：fixed。对于position：relative，页脚将位于内容的正下方，而您的内容较少，则页脚不会像您提到的那样触及底部。

.footer:{
  position:fixed;
 }
0
投票

最简单的解决方案是：

  • 将.footer设置为固定
  • 添加到正文margin-bottom: x，其中x是页脚的高度
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.