CSS 布局是前端開發中不可或缺的一部分，而在設計頁面時，高度自適應的布局是非常重要且實用的特性。在這篇文章中，我們將探討使用 CSS 實現高度自適應布局的方法。

在 CSS 中，元素的高度通常是由內容的高度決定的。但是對于一些需要使用高度自適應布局的元素，通常需要使用一些特殊的技巧來實現。

.example {
height: auto;
min-height: 200px;
}

上邊的代碼是一個簡單的實現高度自適應布局的示例。其中，我們使用了 height: auto; 屬性來讓元素的高度隨內容響應，并且使用了 min-height: 200px; 屬性來設置元素的最小高度。

在實際應用中，我們通常需要更加復雜的布局來滿足需求。比如，我們可能需要將一個元素的高度設置為屏幕高度的 80%。那么該如何實現呢？

.example {
height: 80vh;
}

上邊的代碼就是實現這個功能的簡單示例。其中，vh 是一個 CSS3 的單位，表示視口的高度。為了讓元素的高度等于屏幕高度的 80% ，我們使用了 height: 80vh;。這樣，我們就可以輕松實現一個高度自適應的布局。

當然，實際應用中的 CSS 布局要比這個例子更加復雜。但是通過理解和掌握這些基本的 CSS 技巧，我們就可以輕松地實現高度自適應布局，讓頁面更加美觀、易用。