css3设置高度布满 css如何设置高度自适应：代码示例

CSS3提供了多种方法来设置元素的高度自适应，使其能够布满容器。下面将介绍一些常用的方法。

1. 使用百分比值：可以将元素的高度设置为相对于父元素的百分比值，从而实现自适应布局。例如，将一个div元素的高度设置为父元素高度的50%：

div {
  height: 50%;
}

2. 使用vh单位：vh单位表示视口高度的百分比，可以直接将元素的高度设置为视口高度的一部分。例如，将一个div元素的高度设置为视口高度的80%：

div {
  height: 80vh;
}

3. 使用flex布局：flex布局是一种强大的布局方式，可以轻松实现元素的自适应高度。通过将父元素的display属性设置为flex，并设置其子元素的flex属性，可以实现元素的高度自适应。例如，将一个父元素的高度自适应其子元素的总高度：

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.child {
  flex: 1;
}

4. 使用calc函数：calc函数可以在CSS中进行简单的数学计算，可以用来计算元素的高度。例如，将一个div元素的高度设置为容器高度减去固定值：

div {
  height: calc(100% - 50px);
}

通过使用以上方法，我们可以轻松实现元素的高度自适应布满。根据具体的需求和场景，选择合适的方法来设置元素的高度，从而实现更灵活的布局效果。