上下布局，高度不固定，上下div怎么分别自适应

Question

父级div高度不固定
有两个子div，上下布局，下边的高度100px固定在底部，上边子div高度自适应怎么搞呢

Answer 1

<div class="box-main">
    <div class="top-box"></div>
    <div class="bottom-box"></div>
</div>

.box-main{
    display:flex;
    flex-direction: column;
    .top-box{
        flex: 1;
    }
    .bottom-box{
        flex: 0 0 100px;
    }
}

Answer 2

1. flex
2. 父relative，子absolute

应该都很容易。

Answer 3

top部分的高度决定父容器的高度
html

<div class="container">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

css

   .container{
    width:100%;
    padding-bottom:100px;
    position:relative;
   }
   .top{
    width:100%;
    height:100%;
    background-color:green;
    
   }
   .bottom{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:100px;
    background-color:red;
   }