Question

我知道这是一个常见问题，但我无法解决这个问题。无论我尝试多少种设置组合，页脚都不会停留在页面底部。它只会坐在它上面的任何其他地方。

body {
  margin: 0;
  background-color: #ACFAB7;
}

# container {
  margin: 0 auto;
  padding: 40px;
}

#header {
  z-index: 0;
  height: 78px;
  background-color: #2ecc71;
}

#footer {
  z-index: 2;
  height: 40px;
  width: 100%;
  padding: 0px;
  position: relative;
  background-color: #2ecc71;
  /*display required to center text*/
  display: table;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#image {
  z-index: 1;
  margin: 20px auto;
  padding: 50px;
}

/*Centers text within the header*/
span {
  display: table-cell;
  vertical-align: middle;
}

Answer 1

你有很多问题。此解决方案适用于：

将页脚固定在页面末尾。
使内容居中（垂直和水平）。

<强>修复

摆脱display: table。
摆脱width: 100%。
将relative更改为fixed。

#footer {
  z-index: 2;
  line-height: 40px;
  padding: 0px;
  position: fixed;
  background-color: #2ecc71;
  text-align: center;
  left: 0; right: 0;
  bottom: 0;
}

<div id="footer">Copyrights.</div>

Answer 2

您可以使用position: fixed; bottom: 0;

#footer {
  z-index: 2;
  height: 40px;
  width: 100%;
  padding: 0px;
  background-color: #2ecc71;
  text-align: center;
  margin-left: auto;
  margin-right: auto;  
  position:fixed;
  bottom:0;
  left: 0;
}

<div>
  <footer id="footer">Footer</footer>
</div>

Answer 3

position: fixed;和bottom: 0;应该可以解决问题。根据需要添加宽度和高度。

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 30px;
  background-color: aquamarine;
}

<div style="background-color: lightgrey;height: 800px">
  Page content
</div>
<div class="footer">
  this is the footer
</div>

将页脚保持在页面底部？

3 个答案: