如何建立具有固定頁首和頁尾的 100% 最小高度 CSS 佈局？

100% 最小高度CSS 佈局：解鎖自適應內容高度

實現流暢且適應性強的佈局，其中元素在不同的範圍內保持最小高度瀏覽器上下文可能是一個挑戰。本教學重點介紹一種突出的 CSS 佈局技術來解決此問題，特別是在涉及固定高度頁眉和頁腳的場景中。

最小高度命題

的基石這種方法在於為容器元素分配 100% 的最小高度，用#container 表示。這確保了即使內容不足以填充可用空間，元素也會擴展以佔據頁首和頁尾之間的整個高度。

相對定位

#container 元素採用相對位置，這允許 #footer 元素保持固定在其底部，無論內容的長度如何。前面指定的 100% 最小高度可以保證正確的定位，即使內容強制 #container 垂直擴展也是如此。

Padding-bottom 調整

因為 #content 不再因為相對定位，這是正常流程的一部分，我們使用 padding-bottom 為絕對 #footer 建立空間。此填滿有助於元素的滾動高度，防止頁腳與其上方的內容重疊。

使用示例

以下CSS 代碼舉例說明了此佈局技術：

div#container {
    position: relative;
    min-height: 100%;
}

div#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

div#content {
    padding-bottom: 5em; /* Provide space for the footer */
}

響應式適應

隨著瀏覽器視窗大小調整或文字大小變化，版面配置會無縫適應。容器調整其高度以容納內容，而頁腳保持固定在底部。這確保了用戶獲得一致且視覺上愉悅的體驗。

以上是如何建立具有固定頁首和頁尾的 100% 最小高度 CSS 佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！