首頁 >web前端 >css教學 >如何創建無論內容高度如何都保留在頁面底部的黏性頁腳?

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

Linda Hamilton
Linda Hamilton原創
2024-12-23 09:00:36938瀏覽

How Can I Create a Sticky Footer That Remains at the Bottom of the Page Regardless of Content Height?

頁腳定位:頁面或內容底部,自適應高度

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

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

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn