CSS自適應(yīng)布局是一個(gè)非常重要的概念，它可以幫助我們?cè)诓煌脑O(shè)備和分辨率下展示出美觀且適配的網(wǎng)頁(yè)。而其中重要的一點(diǎn)就是高度的自適應(yīng)。以下是一些實(shí)現(xiàn)高度自適應(yīng)的方法。

/* 方法一：利用vh和calc */
.container {
height: calc(100vh - 100px);
}
/* 方法二：利用flexbox */
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1;
}
/* 方法三：利用table-cell */
.container {
display: table;
height: 100%;
}
.content {
display: table-cell;
vertical-align: middle;
}
/* 方法四：利用absolute和transform */
.container {
position: relative;
padding-bottom: 50%;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

以上四種方法都能實(shí)現(xiàn)高度的自適應(yīng)，具體使用哪種方法需要根據(jù)具體的情況來(lái)選擇，比如是否需要支持老舊瀏覽器、高度是否需要在父元素內(nèi)垂直居中等等。在實(shí)際的開(kāi)發(fā)中也可以根據(jù)需求組合使用這些方法。