flex布局中的自动占满剩下的内容

没点击的时候

flex布局中的自动占满剩下的内容_第1张图片

点击完后的样子:

flex布局中的自动占满剩下的内容_第2张图片

代码:




做成这个需要有三个前提条件

1、父盒子(box)要设置 display: flex;  flex-direction: column;前两个固定的 height: 100vh;高度必须设置

2、子盒子1(box1)高度必须是根据条件判断必须包括一个定高,一个auto

3、子盒子2(box2)必须设置flex为auto

 

你可能感兴趣的:(css,HTML,前端)