Question

我有一个简单的页脚，希望一直位于页面底部。

当前它固定在页面的底部，但是当页面的内容较高并且需要滚动时，页脚位于代码的顶部，而不是底部。

  .footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 8vh;
  background-color: #000000;
}

@media only screen and (max-width: 500px) {
  .footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 16vh;
    background-color: #000000;
  }

<div class="footer">
</div>

一个指针真的很值得赞赏，并且在底部没有空格。我已经尝试过粘性，但这也没有用。

谢谢。

Answer 1

如果您希望页脚保持固定（始终可见）在页面底部，则可以给<body>填充等于页脚的高度。这样，任何内容都不会隐藏在页脚后面。

Answer 2

我从Here学到了一种可能对您有帮助的方法。只需按如下所示构造HTML：

<div id="container">
    <div id="header"></div>
    <div id="body"></div>
    <div id="footer"></div>
</div>

并这样声明您的样式：

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

它对我有用，希望对您也有帮助。

页脚与媒体查询重叠内容

2 个答案: