CSS中有一種布局方式就是頭尾固定高度。這種方式可以讓頭部和尾部元素保持固定高度，而內(nèi)容區(qū)域則可以自適應(yīng)高度，這樣可以更加靈活地布局網(wǎng)站。

.header {
height: 50px; /* 設(shè)置頭部高度為50px */
background-color: #f0f0f0;
}
.footer {
height: 30px; /* 設(shè)置尾部高度為30px */
background-color: #ccc;
}
.content {
/* 設(shè)置內(nèi)容區(qū)域的高度為視口高度減去頭部和尾部高度 */
height: calc(100vh - 80px); 
background-color: #fff;
}

上面代碼中，我們分別定義了頭部、尾部和內(nèi)容區(qū)域的CSS樣式。通過設(shè)置固定的高度，并且使用calc函數(shù)計算出內(nèi)容區(qū)域的高度，就可以實現(xiàn)頭尾固定高度的布局效果。

當(dāng)然，這種布局方式還可以進行優(yōu)化。比如，如果頭部和尾部的高度都是固定的，可以使用position屬性固定它們的位置，這樣可以更好地控制頁面布局。

.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 50px;
background-color: #f0f0f0;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 30px;
background-color: #ccc;
}
.content {
margin-top: 50px; /* 設(shè)置內(nèi)容區(qū)域的上邊距為頭部高度 */
margin-bottom: 30px; /* 設(shè)置內(nèi)容區(qū)域的下邊距為尾部高度 */
background-color: #fff;
}

上面代碼中，我們分別使用position屬性將頭部和尾部固定在頁面的頂部和底部。為了避免內(nèi)容被頭部和尾部遮擋，我們還需要設(shè)置內(nèi)容區(qū)域的上下邊距。

總之，頭尾固定高度的布局方式可以讓網(wǎng)站頁面更加美觀、簡潔，適合用于各種類型的網(wǎng)站，成為了Web開發(fā)中常用的布局方式之一。