如何建立帶有頁首和頁尾的全高單列 CSS 佈局？

建立具有頁眉和頁腳的基於CSS 的單列佈局

在CSS 版面設計領域中，建立可以遇到跨頁面整個高度（不含頁首和頁尾）的固定寬度、單列版面。為了滿足這項要求，人們提出了各種方法，每種方法都有其獨特的優點和缺點。

幸運的是，在現代瀏覽器（2015 年以後）中，可以使用 display:flex 屬性存取簡單可靠的解決方案。這種方法消除了對 JavaScript 的需求，並提供了一種乾淨且有效率的替代方案。

使用display:flex 的解決方案

要使用display:flex 實作佈局，請遵循以下步驟步驟：

將 display:flex 和 flex-direction:column 屬性應用於 body 元素。這將垂直排列子元素。
1. 建立一個 #main 元素並將其 flex-grow 屬性設為 1。這將導致元素擴展以填充剩餘的垂直空間。
2. 使用CSS 屬性 min-height 和 background 可依需求設定頁首和頁尾的樣式。

範例程式碼

html, body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div>

利用此技術，可以建立滿足指定條件的單列佈局，確保與現代瀏覽器的相容性。

以上是如何建立帶有頁首和頁尾的全高單列 CSS 佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！