CSS設置自適應高度的方法

在CSS中，我們可以使用多種方法來設置元素的自適應高度，以下是一些常見的方法：

1、使用百分比（%）單位

通過百分比單位，我們可以將元素的高度設置為父元素高度的某個比例，如果我們想要將元素的高度設置為父元素高度的50%，我們可以這樣寫：

.child-element {
  height: 50%;
}

2、使用視口單位（vw、vh）

視口單位允許我們根據(jù)視口（即瀏覽器窗口）的大小來設置元素的高度，如果我們想要將元素的高度設置為視口高度的10%，我們可以這樣寫：

.child-element {
  height: 10vh;
}

3、使用min-height和max-height屬性

min-height和max-height屬性允許我們設置元素的***小和***大高度，如果我們想要將元素的高度設置在100px到200px之間，我們可以這樣寫：

.child-element {
  min-height: 100px;
  max-height: 200px;
}

4、使用flexbox布局

Flexbox布局允許我們更靈活地控制元素的高度，通過設定flex容器的高度為0，并設置flex子項的高度為100%，我們可以實現(xiàn)自適應高度的布局。

.container {
  display: flex;
  height: 0;
}
.child-element {
  height: 100%;
}

是幾種常見的CSS設置自適應高度的方法，在實際應用中，我們可以根據(jù)具體的需求和場景來選擇合適的方法。