CSS頭尾固定中間滾動是一個常見的網站設計需求，它能夠幫助網站在保持頂部和底部固定的同時讓內容部分可以滾動。這樣的設計在提升用戶體驗的同時，也提高了頁面的可用性和易用性。

html,body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
display: table;
}
.header, .footer {
width: 100%;
height: 50px;
background-color: #333;
color: #fff;
display: table-row;
}
.content {
height: 100%;
display: table-row;
overflow: auto;
}

上述CSS代碼可以幫助我們實現頭尾固定中間滾動的布局。我們使用display: table和display: table-row屬性來創建一個table-like布局，也是我們實現這種布局的關鍵。header和footer部分采用display: table-row來固定在頁面的頂部和底部，中間的content部分采用display: table-row和overflow: auto來實現內容部分可以滾動。

值得注意的是，我們需要給html和body設置height: 100%來確保布局的高度和瀏覽器窗口高度一致，還需要給.container元素設置height: 100%來讓它占據整個瀏覽器窗口高度。這樣我們就可以實現一個完美的頭尾固定中間滾動布局了。