| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .box{ display: flex; width: 100%; /*height: 100%;*/ height: 100vh; flex-direction: column; background-color: yellow; .box1{ width: 100%; height:200px; flex-shrink: 0;//防挤压 background-color:deeppink; } .box2{ width: 100%; flex: auto; background-color: green; } |
做成这个需要有三个前提条件
1、父盒子(box)要设置 display: flex; flex-direction: column;前两个固定的 height: 100vh;高度必须设置
2、子盒子1(box1)高度必须是根据条件判断必须包括一个定高，一个auto
3、子盒子2(box2)必须设置flex为auto