CSS中有一種布局方式就是頭尾固定高度。這種方式可以讓頭部和尾部元素保持固定高度，而內容區域則可以自適應高度，這樣可以更加靈活地布局網站。

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

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

當然，這種布局方式還可以進行優化。比如，如果頭部和尾部的高度都是固定的，可以使用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; /* 設置內容區域的上邊距為頭部高度 */
margin-bottom: 30px; /* 設置內容區域的下邊距為尾部高度 */
background-color: #fff;
}

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

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