CSS3自適應(yīng)高度是最近Web開發(fā)中最重要的幾個(gè)趨勢之一。它在很大程度上因其簡單性和易用性而受到開發(fā)人員的喜愛。在這篇文章中，我們將看到如何通過CSS3代碼實(shí)現(xiàn)自適應(yīng)高度效果。

/* CSS代碼實(shí)現(xiàn)自適應(yīng)高度效果*/
.container {
display: flex;
align-items: stretch;
height: 100%;
}
.sidebar {
width: 20%;
margin-right: 2%;
}
.content {
width: 78%;
}
@media (max-width: 720px) {
.container {
flex-direction: column;
}
.sidebar {
width: 100%;
margin-right: 0;
order: 2;
}
.content {
width: 100%;
order: 1;
}
}

我們首先使用flexbox布局來創(chuàng)造一個(gè)容器，這個(gè)容器被用來包含內(nèi)容。然后我們給這個(gè)容器賦予100%高度，以便使所有內(nèi)容使用指定的高度。接著，我們指定20%的寬度給sidebar，78%的寬度給內(nèi)容。為了使其更具響應(yīng)性，我們在@media查詢中使用了max-width。這使得當(dāng)頁面寬度小于或等于720px時(shí)，我們切換容器的方向而不是使用水平布局，將sidebar移動(dòng)到容器的末尾，并放置content到container的開頭。