父元素 100% 高度
HTML代码:
<div id="main">
<div class="A"> 头部DIV </div>
<div class="B">
下部DIV
<!-- <div v-for="(item,index) in circulation" :key="item"> 下部DIV </div> -->
</div>
</div>
CSS代码:
#main {
width: 100%;
height: 100%;
display: flex;
/* 主轴为垂直方向,起点在上沿。 */
flex-direction: column;
/* overflow: hidden; */
overflow: auto;
}
.A {
background-color: #85d989;
overflow: auto;
/*用于固定高度的情况*/
/* 空间不足时不会缩小 */
flex-shrink: 0;
/*第3个坑*/
}
.B {
background-color: #cc85d9;
/* overflow: auto; */
/* 如果所有项目的 flex-grow 属性都为 1 则他们等分剩余空间*/
/* 默认为0,即如果存在剩余空间,也不放大 */
flex-grow: 1;
}