假设我有以下内容:
.wrap { height:400px; }
.header { height:100px; }
.footer { height:100px; }
<div class="wrap">
<div class="header"></div>
<div class="middle_row"></div>
<div class="footer"></div>
</div>
是否有任何 CSS 解决方案可以将 .middle_row 动态拉伸(stretch)到 200px?
最佳答案
是的,尝试 Flexbox
.wrap {
display: flex;
height: 400px;
flex-direction: column;
}
.header, .footer {
flex: 0 0 100px;
background: lightblue;
}
.middle_row {
flex: 1;
background: lightgreen;
}
<div class="wrap">
<div class="header"></div>
<div class="middle_row"></div>
<div class="footer"></div>
</div>
关于css - 基于父级的 div 动态最大高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35606223/