上下结构，上边的div高度10% min-height 70px 如何让下边div的高度和上边的高度相加是100%

Question

结构：一个大的div里面包含两个小的div上下结构的，上边部分的高度是10%min-height是70px，如何设置下边部分的高度，让其两个的高度总和始终站父元素高度的100%.mainwidth100%height100%border1pxsolidredbox-sizingborder-boxpositionabsolutedisplayflexalign-itemcolumn.awidth100%height10%min-height70pxbox-sizingborder-boxborder1pxsolidgreen.bwidth100%heightautobox-sizingborder-boxborder1pxsolidblack

Answer 1

方法很多，比如flex布局，主轴方向为纵轴,设置第一个元素height:10%,第二个元素flex:1,代码为：
最外层{
height:100%;
display:flex;
flex-direction:column;
}
div1{
height:10%;
}
div2{
flex:1
}
或者用css运算符calc
div1{
height:10%
}
div2{
height:calc(100%-10%);
}
                            

Answer 2