CSS的布局方式有很多種，而最經典的一種布局方式便是上下結構的布局。上下結構布局指的是網頁上下分成兩個區域，通常上面的區域為header，下面的區域為content。

實現上下結構的布局并不難，但是在不同屏幕尺寸下保持布局的穩定性則是一件需要考慮的問題。當瀏覽網頁的用戶數量越來越多時，不同屏幕尺寸的設備也隨之增多。針對每一個設備調整布局樣式的方法早已經被證明是低效的。因此自適應布局樣式便應運而生。

下面是一段使用CSS實現上下結構自適應布局的代碼。

.header {
height: 100px;
background-color: #bebebe;
}
.content {
height: calc(100% - 100px);
background-color: #f1f1f1;
}

上面的代碼可以實現一個簡單的上下結構移動設備自適應布局。

其中.header為上部區域的css類，.content為下部區域的css類。在上部區域的css樣式中設置高度為100px，背景色為#bebebe，在下部區域的css樣式中計算剩余的高度（100%減去上部區域的高度）并設置背景顏色為#f1f1f1即可。

此方法可以適應移動端和PC端的自適應布局，無論你正在使用的是大屏幕還是小屏幕，只需要在代碼中進行簡單的修改就可以輕松適應。

總的來說，CSS的上下結構自適應布局是一種非常實用的布局方式。通過上面的代碼示例，我們可以看到，一個簡單的CSS代碼便可以快速實現一個穩定的上下結構布局。