CSS上下分欄自適應是前端開發中需要掌握的技能之一，因為在很多情況下，網頁的排版需要設置上下兩個分欄，而這兩個欄目的內容又需要自適應屏幕大小。下面我們一起來介紹具體的實現方法。

<div class="container">
<div class="top">
<p>這里是上欄</p>
</div>
<div class="bottom">
<p>這里是下欄</p>
</div>
</div>

.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top {
flex: 1;
background-color: #ccc;
overflow: auto;
}
.bottom {
background-color: #eee;
overflow: auto;
}

首先，我們需要用到flex布局，將大容器設置為column方向，即上下排列。然后，需要設置大容器的高度為100vh，即占滿整個瀏覽器窗口。

接著，我們將上欄的flex值設置為1，這樣上欄會自適應剩余空間，并且當上欄內容超出屏幕時，會自動生成滾動條。同樣的，下欄也需要設置overflow為auto，以自動生成滾動條。

至此，我們就完成了CSS上下分欄自適應的實現。