我在做布局。
null
.container{
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
background-color: gray;
}
.header{
width: 100%;
height: 80px;
background-color: red;
}
.content{
align-self: stretch;
width: 100%;
background-color: blue;
}
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Be filled the rest part
</div>
</div>
null
我所期望的
条件
我不想在CSS中使用calc()
,因为标头的高度可能是动态的。
将flex-grow:1;
添加到.content
中
null
.container{
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
background-color: gray;
}
.header{
width: 100%;
height: 80px;
background-color: red;
}
.content{
align-self: stretch;
width: 100%;
background-color: blue;
flex-grow: 1; /* Add this line */
}
<div class="container">
<div class="header">
Header
</div>
<div class="content">
Be filled the rest part
</div>
</div>