如何用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