CSS上下布局自適應是指通過CSS樣式設置，在一個容器中上下兩個部分能夠隨著瀏覽器窗口大小的變化而自適應地調整位置。這種布局形式包括頂部導航欄、正文內容、底部版權信息等。下面我們來看一下如何實現這種布局。

<!-- HTML結構 -->
<div class="container">
<div class="header">這里是頂部導航欄</div>
<div class="content">這里是正文內容</div>
<div class="footer">這里是底部版權信息</div>
</div>
/* CSS樣式 */
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
line-height: 50px;
}
.content {
flex: 1;
padding: 20px;
}
.footer {
height: 50px;
background-color: #eee;
text-align: center;
line-height: 50px;
}

在這段代碼中，我們首先設置了容器為100%寬高，并使用了flex布局，使得上下兩個部分都能夠自適應。頂部導航欄和底部版權信息使用了固定的高度，而正文內容使用了flex: 1，表示正文內容會占據剩余的空間。

當瀏覽器窗口大小發生變化時，上下兩個部分的高度都會按比例自適應地調整。同時，正文內容也會根據空間的變化而自動調整。

總之，通過CSS上下布局自適應的方式可以實現頁面的自適應布局，適應不同設備的屏幕大小，提高頁面的可讀性和用戶體驗。