flex布局实现上下固定高度，中间自适应布局
flex布局在实际开发中越来越常用，实现左右宽度或者上下高度固定，中间自适应的布局的实际需求也很常见。实现起来也很简单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flex</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.container{
height: calc(100vh - 50px);
background-color: black;
display: flex;
flex-direction: column;
}
.header{
width: 100%;
height: 100px;
background-color: #e77c8e;
}
.main{
width: 100%;
flex: 1;
background-color: #2bae85;
}
.footer{
width: 100%;
height: 100px;
background-color: #7a7374;
}
</style>
</head>
<body>
<div class="container">
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
</div>
</body>
</html>注意点：
1、container父容器的高度必须是一个可以计算出来的固定高度。
2、实际开发中因为中间部分内容层级太多，甚至嵌套表格等，使得自适应无法生效。这时候要看一下中间自适应部分的高度是否从父容器继承过来，可以试给table高度不对的那一层设置 height:100%; 或者 height:inherit; 试一下能否生效。
声明：本站所有文章，如无特殊说明或标注，均为网络收集发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
