Question

因此，当我设置页脚的position:absolute;时，它将停留在移动视图的底部；但是，它将漂浮在桌面页面的页面中间。当我取下它时，它将停留在桌面页面的底部，然后在移动视图中漂浮在页面的中间。

人们将如何纠正这一问题

Answer 1

在CSS下方提供页脚包装器，您就完成了...

.foot-wrapper {
    position:fixed;
    left:0;
    bottom:0;
}

Answer 2

如果我是对的，您希望页脚位于整个页面的底部，或者像“粘性”页脚一样（如果您位于页面中间，则总是希望看到页脚）。

第一个解决方案（底部为页脚）

index.html

<div class="content-wrapper">
    <div class="some-content"></div>
    <footer></footer>
</div>

style.css

.content-wrapper{
  position:relative;
  padding-bottom:100px;
}
footer{
  position:absolute;
  bottom:0;
  left:0;
  /*your style after that*/
  width:100vw;
  height:100px;
}

第二种解决方案（适用于页脚）

style.css

.content-wrapper{
  padding-bottom:100px;
}
footer{
  position:fixed;
  bottom:0;
  left:0;
  /*your style after that*/
  width:100vw;
  height:100px;
}

希望有帮助！

如何使页脚停留在台式机和移动设备的底部

2 个答案: