是否将页脚放在页面底部？

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 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>