在CSS布局中，自適應高度一直是一個比較麻煩的問題。而隨著移動設備的普及，人們對于自適應高度的需求也越來越大。

首先介紹常見的幾種布局方式：

.box {
width: 1000px;
margin: 0 auto;
}

上面這個是寬度固定的居中布局，但是高度并沒有指定，會出現內容過多時下方溢出的情況。

.box {
width: 1000px;
margin: 0 auto;
height: 500px;
overflow: auto;
}

這種方式指定了高度，但是當內容不超過500px時仍會有多余的空白。

以下是實現自適應高度的方法：

方法一：

.box {
width: 1000px;
margin: 0 auto;
display: table;
}
.box .content {
display: table-row;
}

這種方式通過將父元素設置為table，子元素設置為table-row來達到自適應高度的目的。但是這種方法會出現一些兼容性問題，不適用于所有瀏覽器。

方法二：

.box {
width: 1000px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.box .content {
flex: 1;
}

這種方法使用flex布局，將父元素設置為縱向排列，并將子元素的flex值設為1，使其自適應高度。這種方式兼容性較好，但需要注意特殊HTML元素（如視頻）的高度可能出現問題。

方法三：

.box {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.box:before {
content: "";
height: 100%;
float: left;
visibility: hidden;
}
.box:after {
content: "";
height: 100%;
float: left;
visibility: hidden;
}
.box .content {
margin: 0 -9999px;
padding: 0 9999px;
}

這種方法比較巧妙，通過before和after設置高度為100%的元素，來撐開父元素的高度。子元素設置負的margin和正的padding，使其填滿整個父元素。但是這種方式會對性能有一定的影響。

以上就是實現CSS布局自適應高度的幾種方式，開發者們可以根據實際情況選擇合適的方式。