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

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

當

中動態載入內容的高度超過部分有所不同，它可能會產生一個令人困惑的問題：如何才能顯示出來？部分保持在可見內容的底部，同時也符合瀏覽器視窗的下邊界？

Flexbox 版本

對於使用 Flexbox 的優勢的人來說，實現這種黏性頁腳是一件很簡單的事情蛋糕。透過使用高度拉伸包裝器將所有元素封裝在 Flex 容器中，頁腳可以輕鬆適應動態內容。

只需使用 display: flex 和 flex-direction: column 配置包裝器元素即可。然後，分配至少一個flex 值超過0 的同級元素，例如：

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

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

article {
  flex: 1;
}

Html 標記：

<div>

這種方法有效地將頁腳黏合到底部當內容較短時瀏覽器窗口，並動態調整其位置以符合較長內容的高度。

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