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

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代碼可以幫助我們實現(xiàn)頭尾固定中間滾動的布局。我們使用display: table和display: table-row屬性來創(chuàng)建一個table-like布局，也是我們實現(xiàn)這種布局的關(guān)鍵。header和footer部分采用display: table-row來固定在頁面的頂部和底部，中間的content部分采用display: table-row和overflow: auto來實現(xiàn)內(nèi)容部分可以滾動。

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