如何在 HTML 中建立黏性頁腳？

如何確保頁腳固定在頁面底部

在HTML 頁面中，通常希望有一個固定的頁腳保留在頁面底部頁面底部，無論內容長度如何。然而，有時，樣式問題可能會阻止頁腳元素佔據整個頁面寬度或在其下方留下空白。

為了解決此問題，一種流行的解決方案是「黏性頁腳」技術。此方法涉及建立一個包含正文內容的包裝元素和一個與頁腳高度相同的推播元素。

將包裝元素的底部邊距設定為等於頁腳高度的負值，推送元素是被推到頁面底部。這會強制頁腳黏在底部邊緣，無論頁面長度如何。

為了說明這一點，請考慮以下CSS 程式碼：

.wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -142px;
  /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
  height: 142px;
  /* .push must be the same height as .footer */
}

HTML 結構：

<div class="wrapper">
  body goes here
  <div class="push"></div>
</div>
<div class="footer">Footer!</div>

透過實作這種黏性頁腳方法，您可以確保頁腳元素保持固定在頁面底部，填滿整個頁面寬度並消除不需要的白色空間。

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