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

如何跨瀏覽器實現 100% 最小高度佈局

在網頁設計中，跨不同瀏覽器實現 100% 最小高度一致的佈局可能是一個挑戰。考慮由固定高度的頁首和頁尾組成的佈局，其內容應佔據剩餘空間並始終填充固定元素之間的間隙。如何有效確保此功能？

Min-Height：最佳內容區域的基礎

為了確定內容區域的最小高度，CSS min-height 屬性被證明是非常寶貴的。將此屬性套用於封裝內容的元素，確保它至少填滿 100% 的可用空間。

相對定位：保持頁腳接地

相對定位，應用於容器元素，在維持所需的佈局方面起著至關重要的作用。透過相對定位，頁腳元素 (#footer) 將始終保留在容器的底部，即使內容垂直擴展也是如此。

Padding-Bottom：為頁腳留出空間

至容納位於容器底部的絕對頁腳，應將 padding-bottom 新增至內容區域。這種 padding-bottom 有效地為頁腳創建了必要的垂直空間，以適應而不與內容重疊。

以下是示範此方法實現的程式碼片段：

html, body {
    height: 100%;
}

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

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

#content {
    padding-bottom: 5em;
}

使用此程式碼，內容將動態調整其高度以填充可用空間，而頁腳始終保持固定在容器的底部。這項技術有效地確保了 100% 最小高度佈局，可以在各種瀏覽器中無縫運行。

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