可以设置外层自适应高度的容器为flex布局，利用flex-basis属性即可实现自动填满剩余高度；代码如下：
.container{
display: flex;
flex-flow: column nowrap;
height: 500px;
border: 2px dashed orange;
}
.area1 {
flex-basis: 300px;
background-color: lightblue
}
.area2 {
flex: 1;
background-color: darkcyan;
}
<section class="container">
<div class="area1">300px</div>
<div class="area2">other</div>
</section>原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/css/css-auto-height.html
微信扫一扫
支付宝扫一扫
在自适应布局或者移动端网页开发时，我们经常会用到em和rem两个长度单位。接下来我们讨论一下这两个单位和px之间的区别，以及他们的使用场景等。 px px，像素(计算机屏幕上的一个…
所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。他俩的区别就是：圣杯用padding。…
定义 一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。 触…
CSS大家肯定都是会的但是每个人所撑握的情况都不一样，特别是已经工作几年的前辈(这里指的是我司)很多CSS玩法都不知道，可能他们已经习惯了用组件， 但是面试的时候又不可避免问，所以…
想到用css设置元素透明度，大家的第一反应会是：用Opacity属性来设置透明度，其实在css中还有其他设置透明度的方法。本章给大家介绍用transparent属性设置透明度，以及…
实现左侧固定，右侧自适应的两栏布局的方法有很多。其中经常用到的有float方法、BFC方法、CSS3的flex布局及grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。
