Question

我的网页中的页脚始终停留在页面内容的底部，而不是始终停留在页面内容之后。我在其上使用绝对位置，但是当页面位于顶部并停留在该位置时，它只是移至视口底部，因此可以滚动过去。

.footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: lightblue;
}

<p>Lorem ipsem...</p><p>Lorem ipsem...</p><p>Lorem ipsem...</p><p>Lorem ipsem...</p><p>Lorem ipsem...</p><p>Lorem ipsem...</p><p>Lorem ipsem...</p><p>Lorem ipsem...</p>
<p>Lorem ipsem...</p>
<p>Lorem ipsem...</p>
<p>Lorem ipsem...</p>
<p>Lorem ipsem...</p>
<p>Lorem ipsem...</p>
<div class='footer'>FOOTER</div>

Answer 1

您可以制作body的{{1}} position，也可以使用relative为div创建相对定位的包装器footer达到文档的整个高度。 documentation指出：

绝对定位的元素相对于其最近定位的祖先（即不是静态的最近祖先）定位。

这意味着height: 100%，left，right和top属性被应用于相对于未静态定位的最接近祖先的元素。如果其父项位于相对位置，则bottom将使其停留在父项元素的底部。

赋予bottom: 0一个相对位置：

body

.footer{
      width: 100%;
      position: absolute;
      bottom: 0;
      background-color: lightblue;
}
body{
  position: relative;
}

创建包装器Lorem ipsem...Lorem ipsem...Lorem ipsem...Lorem ipsem...Lorem ipsem...Lorem ipsem...Lorem ipsem...Lorem ipsem... Lorem ipsem... Lorem ipsem... Lorem ipsem... Lorem ipsem... Lorem ipsem... <div class='footer'>FOOTER</div>：

div

.footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    background-color: lightblue;
}
.wrapper{
  position: relative;
  height: 100%;
}

您也可以只使用Lorem ipsem...Lorem ipsem...Lorem ipsem...Lorem ipsem...Lorem ipsem...Lorem ipsem...Lorem ipsem...Lorem ipsem... Lorem ipsem... Lorem ipsem... Lorem ipsem... Lorem ipsem... Lorem ipsem... <div class="wrapper"> <div class='footer'>FOOTER</div> </div>标记，而不必赋予其始终位于页面底部的位置。

footer

.footer{
    width: 100%;
    background-color: lightblue;
}

始终将页脚置于内容之下

1 个答案: