如何創建無論內容高度如何都保留在頁面底部的黏性頁腳？

頁腳定位：頁面或內容底部，自適應高度

動態內容，流暢的頁腳放置

在網頁設計中，通常需要確保頁腳位於頁面或瀏覽器視窗的底部，無論內容長度為何。這可以透過以下方式實現：

Flexbox 解決方案

使用Flexbox，建立黏性頁腳非常簡單：

1. 定義一個Flex 容器（例如，#main -包裝器），彈性方向設定為列。
2. 設定彈性容器的最小高度到 100% 以確保它跨越整個頁面高度。
3. 在 Flex 容器中加入一個 Flex 值大於 0 的子元素（例如，article { flex: 1; }）。這有助於垂直擴展元素並將頁腳推向底部。

CSS 代碼：

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

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

article {
  flex: 1;
}

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