如何建立保留在頁面或內容底部（以較低者為準）的黏性頁腳？

頁腳位於頁面底部或內容底部，以較低者為準

簡介

在Web 開發中，至關重要確保網頁上元素的正確定位，尤其是在處理動態內容時。一個常見的挑戰是實現保留在頁面或內容底部的頁腳，這取決於哪個較低。

問題陳述

提供的 HTML 結構包括包含頁眉、導覽、文章和頁腳的父包裝元素 (#main-wrapper)。挑戰是根據文章元素內的內容高度動態調整頁腳的位置。當內容充足時，頁腳應黏在頁面底部，但當內容有限時，頁腳應移至瀏覽器視窗的底部。

Flexbox 解決方案

一個強大的解決方案解決這個問題的現代方法是利用 Flexbox。 Flexbox 提供了一個多功能的佈局系統，可以簡化容器內元素的定位和對齊。透過利用flexbox垂直對齊元素的能力，我們可以實現所需的黏性頁腳行為。

CSS程式碼

以下CSS程式碼使用flexbox來實現黏性頁腳footer:

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

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

article {
  flex: 1;
}

在此設定中，#main-wrapper元素是Flexbox 容器，它將flex-direction 設定為column，這意味著元素將垂直堆疊。 Article 元素具有 flex: 1，這使得它佔據了標題和導航未佔用的剩餘空間。

當文章內有足夠的內容時，它會增長以將頁腳向下推，將其定位在頁面底部。但是，當內容有限時，文章會縮小，頁腳會動態移動到瀏覽器視窗的底部，因為 #main-wrapper 元素的最小高度確保它始終填滿視窗。

以上是如何建立保留在頁面或內容底部（以較低者為準）的黏性頁腳？的詳細內容。更多資訊請關注PHP中文網其他相關文章！