CSS 上下布局
情景描述: 有一个高度自适应的 div,里面有两个 div,一个高度 100px,希望另一个填满剩下的高度
方案;---利用 flex 和 flex-grow 实现
<style> html, body { height: 100%; padding: 0; margin: 0;} /* flex 和 flex-grow */ .container { height: 100%; display: flex; flex-direction: column; } .box-A { height: 100px; background: #c0c0c0; } .box-B { flex-grow: 1; background: #ff6b81; } </style> <div class="container"> <div class="box-A">xx</div> <div class="box-B">xxxx</div> </div>