無論內容高度為何，如何將頁腳保留在頁面底部？

頁或內容底部的頁腳

問題：

動態載入內容高度可以改變。目標是將

定位到底部。當內容較多時位於頁面底部，內容有限時位於瀏覽器視窗底部。

答案：

Flexbox 版本：

對於支援Flexbox 的瀏覽器，一個簡單的解決方案是使用display : flex 屬性以及高度包裝元素(#main-wrapper) 為100%。這可確保包裝器拉伸以填充整個視窗。

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

在包裝器內，

flex 值應該是 1，這允許它垂直擴展。這確保了始終會被推到頁面底部或內容底部，具體取決於哪個較大。

article {
  flex: 1;
}

修訂的 HTML：

<div>

以上是無論內容高度為何，如何將頁腳保留在頁面底部？的詳細內容。更多資訊請關注PHP中文網其他相關文章！