[分享]css中如何让高度自适应

CSS中如何让高度自适应 CSS作为前端开发中不可或缺的一部分，它的样式表能够使网页呈现出美观的视觉效果。但是，当我们需要让一个元素在高度方面自适应时，这似乎变得有些棘手了。下面我们来看看实现的解决方...

CSS中如何让高度自适应 CSS作为前端开发中不可或缺的一部分，它的样式表能够使网页呈现出美观的视觉效果。但是，当我们需要让一个元素在高度方面自适应时，这似乎变得有些棘手了。下面我们来看看实现的解决方案。 首先，使用“height: auto;”的方法可以让元素根据内容的多少自适应高度，但这对于一个像div这样“容器”元素并不是很实用。 第二个方法就是利用CSS3的“flexbox”布局来实现自适应高度。首先，使用以下代码来将父元素设置成“flexbox”布局。

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

.child {
  flex: 1;
} 

参考资料：

[1] CSS 利用 Flexbox 让高度自适应的实现方法，https://www.imooc.com/article/19086
[2] CSS height 属性，https://www.w3school.com.cn/cssref/pr_dim_height.asp