如何建立保留在動態頁面內容底部的黏性頁腳？

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

簡介

將頁腳保持在頁面的絕對底部可能具有挑戰性當頁面內容是動態的並且高度變化時。本文深入研究了一種將頁腳自動定位在頁面內容底部或瀏覽器視窗底部的技術，具體取決於哪個較低。

動態內容載入

在您的場景中，內容動態載入到

中。使用 JavaScript 的元素。隨著內容的變化，的高度也會跟著改變。也發生變化。即使在動態內容載入的情況下，您也希望將頁腳保留在頁面內容的底部。

使用 Flexbox 的黏性頁腳

Flexbox 為黏性頁腳提供了簡單的解決方案。透過建立一個 Flex 容器（#main-wrapper）並將 flex-direction 設定為 column，您可以在容器內垂直排列多個元素。

使用 Flexbox 實現黏性頁腳的關鍵是分配一個除頁腳之外的所有元素的 flex 值都大於 0。這確保了這些元素將擴展以填充容器內垂直的可用空間。

在這種情況下，

元素被分配了 flex: 1，它告訴瀏覽器將其展開以填充固定高度標題和導航元素之後的剩餘空間。

程式碼片段

以下程式碼示範如何實現使用Flexbox 的黏性頁腳：

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

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

article {
  flex: 1;
}

結論

透過利用Flexbox 的強大功能並使用容器（#main-wrapper）上的min-height 屬性，您可以建立一個黏性頁腳，根據內容的高度自動調整其位置。這種方法為動態內容載入提供了靈活的解決方案，同時確保頁腳保留在頁面或瀏覽器視窗的底部。

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