CSS中，實(shí)現(xiàn)上下固定，中間滾動(dòng)的效果很常見(jiàn)，如新聞列表、網(wǎng)頁(yè)導(dǎo)航等等。

要實(shí)現(xiàn)這種布局，可以使用position屬性來(lái)實(shí)現(xiàn)上下固定的效果，再使用overflow屬性來(lái)實(shí)現(xiàn)滾動(dòng)效果。

.header {
position: fixed;
top: 0;
width: 100%;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
}
.content {
position: relative;
overflow-y: auto;
top: 50px;
bottom: 50px;
}

在上面的代碼中，.header和.footer分別實(shí)現(xiàn)了固定在頁(yè)面頂部和底部的效果。而 .content則是固定在中間區(qū)域并且允許縱向滾動(dòng)。

使用“top: 50px”和“bottom: 50px”分別指定了.content距離.header和.footer的距離，以防止內(nèi)容區(qū)域遮擋.header和.footer。

最后，當(dāng).content內(nèi)的內(nèi)容過(guò)多時(shí)，就會(huì)自動(dòng)出現(xiàn)縱向滾動(dòng)條，允許用戶滾動(dòng)查看內(nèi)容。

因此，使用CSS實(shí)現(xiàn)上下固定，中間滾動(dòng)的布局效果非常方便簡(jiǎn)潔，可用于多種場(chǎng)景下的網(wǎng)站布局。