CSS中的上下div是網頁布局中常見的一種形式，它可以將頁面內容分為上下兩個部分，使網頁看起來更加清晰、有條理。下面將介紹如何使用CSS實現上下div布局效果。 首先，我們需要在HTML文件中創建兩個div，一個用來作為上部分，一個作為下部分。代碼如下：

<div class="top">
<p>這里是上部分</p>
</div>
<div class="bottom">
<p>這里是下部分</p>
</div>

接著，我們需要在CSS文件中為兩個div分別設置樣式。首先是上部分的樣式：

.top {
height: 100px; /*設置上部分的高度*/
background-color: #f5f5f5; /*設置背景顏色*/
text-align: center; /*使內容居中顯示*/
}

然后是下部分的樣式：

.bottom {
height: calc(100% - 100px); /*設置下部分的高度，注意要減去上部分的高度*/
background-color: #f8f8f8; /*設置背景顏色*/
overflow: auto; /*設置滾動條，當內容過多時自動出現*/
}

最后，將兩個div放在一個容器中，并設置容器的高度為100%。代碼如下：

<div class="container">
<div class="top">
<p>這里是上部分</p>
</div>
<div class="bottom">
<p>這里是下部分</p>
</div>
</div>
.container {
height: 100%; /*設置容器的高度為100%*/
}

這樣，在瀏覽器中打開網頁時，就可以看到頁面被分為上下兩個部分，上部分高度為100px，下部分高度自適應，并且當下部分內容過多時，會自動生成滾動條。 這就是CSS中實現上下div布局的基本方法，它可以使網頁更加整潔、美觀，使用戶愉悅地瀏覽頁面內容。