有一个全屏高度100%的div，里面有两个div，一个高度为自适应auto，希望另一个填满剩下的高度，这个布局样式怎么实现？

Question

有一个全屏高度100%的div，里面有两个div，一个高度为自适应auto，希望另一个填满剩下的高度，这个布局样式怎么实现？

Answer 1

使用flex布局

<style>
.parent{
    height: 1vh;
    display: flex;
    flex-direction: column;
    border: 1px solid red;
}
.child1{
    border: 1px solid blue;
}
.child2{
    flex: 1;
    min-height: 0;
    border: 1px solid green;
}
</style>

<div class="parent">
    <div class="child1">child 1</div>
    <div class="child2">child 2</div>
</div>

Answer 2

楼上说的使用flex布局即可。
flex-direction: column;将默认的左右排版改成上下排版，相当于旋转了90度
这样再配合flex:1;即可实现你要的效果。