Html CSS Div 填充剩余高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35348057/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 18:56:01 来源:igfitidea点击:
CSS Div fill remaining height
提问by Stanley Machnitzki
回答by John
Give the container:
给容器：
display:flex;
flex-direction:column;
and for the element:
对于元素：
flex:1;
The demo: https://jsfiddle.net/ugjfwbg4/1/
演示：https: //jsfiddle.net/ugjfwbg4/1/
body {
background-color: red;
height: 100%;
}
.wrap {
height: 100vh;
width: 100%;
padding: 20px;
background-color: yellow;
display:flex;
flex-direction:column;
}
.top {
width: 100%;
height: 50px;
background-color: blue;
}
.mid {
width: 100%;
background-color: green;
flex:1;
display:flex;
flex-direction:column;
}
.left{
flex:1;
width: 50%;
background-color: red;
}
.bottom {
width: 100%;
height: 50px;
background-color: blue;
}<div class="wrap">
<div class="top"></div>
<div class="mid">
<div class="left">left</div>
</div>
<div class="bottom"></div>
</div>