如何用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{
width: 100%;
height: 100px;
background: red;
}
.bbb{
width: 100%;
flex: 1;
background: yellow;
}
.ccc{
width: 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>


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM