最近项目中经常这种布局，如下图所示：
1高度固定，2高度不确定，根据内容变化，3撑满可视区剩下高度。
这里我们可以用flex布局。
先给父元素加上：
display: flex;
flex-direction: column;高度撑满的3元素加上：
flex: 1; /* auto也可以 */完整布局代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="item1">
我是固定高度
</div>
<div class="item2">
我高度不确定
</div>
<div class="item3">
<ul>
<li>aaaaa</li>
<li>sdsdad</li>
<li>fdsfs</li>
<li>dfsf</li>
<li>dsss</li>
</ul>
</div>
</div>
</body>
</html>
<style>
body{
margin: 0;
}
.container{
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.item1{
height: 50px;
background: #ffbb33;
}
.item2{
background: antiquewhite;
}
.item3{
flex: 1; /* auto也可以 */
background: brown;
overflow-y: auto;
}
</style>接下来我们来理解一下核心代码：
flex-direction: column; 决定元素的排列方向。从上到下排列
flex: 1; 接下来我们看看flex属性：
flex属性
这里flex是一个复合属性，是 flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}该属性有两个快捷值： auto（1 1 auto）和none（0 0 auto）
flex-grow 属性定义属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该元素将缩小。
flex-basis 属性定义了在分配多余空间之前，元素占据的主轴空间。
flex是flex-grow， flex-shrink 和 flex-basis的复合属性，flex-grow设为1表示该元素等分剩余空间，因为只有一个子元素设置了这个，该元素就会撑满剩余空间，这个是解决高度不够时撑满剩下空间。flex-shrink: 1是空间不足时，该元素会缩小，这个解决当该元素内容高度过高时撑满剩余空间。flex-basis: 0%是在分配多余空间之前，该元素占据的主轴空间。设为0%或者auto都能实现这个效果。所以flex: 1和flex: auto都能实现这个效果。