在網頁設計中，布局是非常關鍵且需要重點考慮的一部分。目前常用的布局方式是使用CSS來控制網頁的排版，其中高度自動適應是非常實用的技巧，它可以使網頁元素始終保持相對位置不變。

為了實現高度自動適應的布局，我們可以使用CSS中的一些特性。首先，需要設置父元素的高度為auto，以便隨著子元素的高度變化而自動適應。例如：

.parent {
height: auto;
}

接下來，需要設置子元素的布局方式。一種常用的方式是使用flexbox布局，使用flexbox可以使子元素始終保持相對位置不變。例如：

.parent {
display: flex;
flex-direction: column;
}

其中，display:flex表示使用flexbox布局，flex-direction:column則表示設置子元素的布局方向為豎向排列。此時，子元素的高度將隨著內容的增加而自動適應。

此外，還有一種實現高度自動適應的方式是使用table布局。例如：

.parent {
display: table;
}
.child {
display: table-row;
}

其中，display:table表示使用table布局，display:table-row則表示子元素為表格行，此時子元素的高度將自動隨著父元素的高度改變而自動適應。

綜上所述，高度自動適應是網頁設計中非常實用的一種布局方式，可以使網頁元素始終保持相對位置不變，避免出現錯位等問題。通過使用CSS的flexbox和table布局，可以很輕松地實現高度自動適應的布局效果。