在前端開發中，經常會出現一些需要根據內容自適應高度的元素，例如展示用戶評論、新聞詳情等。 這時候，我們可以使用 CSS 來實現高度根據內容撐開的效果。 比較常見的實現方式是使用overflow:hidden;和動態設置高度，但這種方式會限制內容的顯示范圍，而且需要通過 JS 獲取內容高度再動態設置高度，過程較為繁瑣。 因此，我們可以使用 CSS3 中的一些特性來解決這個問題。 首先，我們可以使用display: table;來將元素轉換為表格顯示模式，這樣可以讓元素自適應高度。 接著，我們可以使用display: table-row;來將元素轉換為表格行，這樣可以讓多個元素自適應高度，并且在同一行內排列。 最后，我們可以使用display: table-cell;來將元素轉換為單元格，這樣可以讓元素在同一行內并排顯示，同時自適應高度，不會出現高度差異。 下面是一段示例代碼，展示如何使用CSS來實現自適應高度的效果。

<style>.comments {
display: table;
width: 100%;
border-collapse: collapse;
}
.comments__item {
display: table-row;
}
.comments__item .comment {
display: table-cell;
border: 1px solid #ccc;
padding: 10px;
}
</style><div class="comments"><div class="comments__item"><div class="comment"><p>這是一條評論。</p><p>這是一條評論的回復。</p></div></div><div class="comments__item"><div class="comment"><p>這是一條評論。</p><p>這是一條評論的回復。</p><p>這是一條評論的回復。</p></div></div></div>

在上面的代碼中，我們創建了一個.comments的容器元素，并將其display屬性設置為table。接著，我們創建了.comments__item元素，并將其display屬性設置為table-row，表示將其轉換為表格的一行。最后，我們創建了.comment元素，并將其display屬性設置為table-cell，表示將其轉換為表格單元格，使其自適應高度并在同一行內排列。 總結一下，使用 CSS 來實現高度根據內容撐開的效果，可以減少 JS 的依賴，提高頁面性能。只需要使用display: table;、display: table-row;和display: table-cell;這些屬性即可輕松實現。