如何用display:flex 竖向分成3部分,头部和底部吸顶

<html>
<head>
<title>放置文章标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="关键字" />
<meta name="description" content="本页描述或关键字描述" />
</head>
<style>
.abc{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction:column;
background: orange;
}
.aaa{
100%;
height: 100px;
background: red;
}
.bbb{
100%;
flex: 1;
background: yellow;
}
.ccc{
100%;
height: 100px;
background: green;
}
</style>
<body>
<div class="abc">
<div class="aaa"></div>
<div class="bbb"></div>
<div class="ccc"></div>
</div>
</body>
</html>

原文地址:https://www.cnblogs.com/luziluck/p/11361677.html