是否將頁腳放在頁面底部？

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>