Fe-interview: [css] 第89天 外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？
第89天 外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？
css
haizhilin2013
All 5 comments
可以设置外层自适应高度的容器为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;
}
md5-5f009227c90ebed750cc70bf324156c2
xxf1996
on 14 Jul 2019
👍9
利用css3的calc函数
<html>
<head>
<style type="text/css">
.top {
height: 300px;
background-color: #dbdd66
}
.bottom {
height: calc(100% - 300px);
background-color: #427cdd
}
</style>
</head>
<body>
<div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>
shejiJiang
on 14 Jul 2019
👍4
几天前正好遇到，总结如下
首先明确 html 的结构，其中 html 采用 react 写法，css 采用 less 写法
<div className={styles.leftBody}>
<div className={styles.leftBodyTop}>
</div>
<div className={styles.leftBodyBottom}>
</div>
</div>
table 布局
比较 hack 的方法
.leftBody {
display: table;
.leftBodyTop {
background: #fff;
display: table-row;
height: 0; /* 尽可能的减小高度，即自适应内容 */
}
.leftBodyBottom {
background: #fff;
display: table-row; /* 占满剩余空间，自适应父类剩余高度 */
vertical-align: top; /* 将内容放在顶部 */
&::before { /* 设置 display：table-row; 时，margin 和 padding 设置会失效，故这里用伪元素代替显示 */
content: '';
display: block;
width: 100%;
height: 16px;
background: #edf0f4;
}
}
}
margin 与 padding
.leftBody {
overflow: hidden; /* 必须设置，否则露底 */
.leftBodyTop {
background: #fff;
}
.leftBodyBottom {
background: #fff;
margin-top: 16px;
margin-bottom: -3000px; /* margin 与 padding 相互抵消来撑满剩余高度 */
padding-bottom: 3000px;
}
}
absolute
此方法需要对 html 做出改动
<div className={styles.leftBody}>
<div className={styles.leftBodyTop}>
</div>
<div className={styles.leftBodyBottom}>
<div className={styles.equalHeight} />
<div className={styles.content}>
</div>
</div>
</div>
由于绝对定位元素无高度的特性无宽度的特性，我们可以伪造一个高度足够高的绝对定位层（设置背景色，边框等属性），同时设置父标签溢出隐藏，那么其多出来的高度就不会显示了，也就实现了看上去的等高布局效果了
.leftBody {
overflow: hidden; /* 必须设置，否则露底 */
.leftBodyTop {
background: #fff;
}
.leftBodyBottom {
background: #fff;
margin-top: 16px;
position: relative;
.equalHeight {
background: #fff;
width: 100%;
height: 999em;
position: absolute;
left: 0;
top: 0;
}
.content {
position: relative;
z-index: 1; /* 内容必须在上方，否则被 equalHeight 覆盖 */
}
}
}
flex
代码最简洁
.leftBody {
display: flex;
flex-direction: column;
.leftBodyTop {
background: #fff;
}
.leftBodyBottom {
background: #fff;
margin-top: 16px;
flex: 1;
}
}
towavephone
on 15 Jul 2019
👍2
之前只想到 calc(100% - 300px) ，看了楼上的学会了 flex-basis 和 flex:1这种方式
xjt31012
on 15 Jul 2019
👍1
可以设置外层自适应高度的容器为
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>
简单放一波阮一峰日志关于此属性的记录，避免大家去百度
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
flex-basis:
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
一句话就是项目占据了固定的高度，再使用flex: 1填空间的时候，不会考虑固定的空间
1018715564
on 10 Nov 2019
Was this page helpful?
0 / 5 - 0 ratings
Related issues
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
haizhilin2013
·
3Comments
Most helpful comment
可以设置外层自适应高度的容器为
flex布局，利用flex-basis属性即可实现自动填满剩余高度；代码如下：在线demo