在CSS中，我們可以使用上下布局的方法，讓中間的內(nèi)容占滿整個頁面，這種方法通常涉及到***定位、相對定位以及負邊距的使用，下面是一個簡單的示例，展示如何實現(xiàn)這種布局：

1、HTML結(jié)構(gòu)：

<div class="container">
    <div class="top-bar"></div>
    <div class="main-content"></div>
    <div class="bottom-bar"></div>
</div>

2、CSS樣式：

.container {
    position: relative; /* 相對于整個頁面進行定位 */
    height: 100vh; /* 容器高度占滿整個頁面 */
}
.top-bar {
    position: absolute; /* ***定位，相對于.container容器 */
    top: 0; /* 頂部與容器頂部對齊 */
    height: 50px; /* 假設頂部欄高度為50px */
    background-color: #f00; /* 示例顏色 */
}
.main-content {
    position: absolute; /* ***定位，相對于.container容器 */
    top: 50px; /* 頂部與頂部欄底部對齊 */
    bottom: 50px; /* 底部與底部欄頂部對齊 */
    width: 100%; /* 寬度占滿整個頁面 */
    background-color: #0f0; /* 示例顏色 */
}
.bottom-bar {
    position: absolute; /* ***定位，相對于.container容器 */
    bottom: 0; /* 底部與容器底部對齊 */
    height: 50px; /* 假設底部欄高度為50px */
    background-color: #00f; /* 示例顏色 */
}

在這個示例中：

.container是整個頁面的容器，使用position: relative;來相對于整個頁面進行定位。

.top-bar和.bottom-bar是頂部和底部的欄，使用position: absolute;來相對于.container容器進行定位。

.main-content是中間的內(nèi)容區(qū)域，使用position: absolute;來相對于.container容器進行定位，并通過top和bottom屬性來指定其上下邊界。

這種方法可以確保中間的內(nèi)容區(qū)域始終占滿整個頁面，無論頂部和底部欄的高度如何變化。