在项目中需要用到一个自动分配内容的功能,即设置两个并列的div如果下方的div关闭,上方的div占满整个屏幕,当下方div出现时,两个div各占界面的50%
<div id="appContainer"> <div id="viewDiv"></div> <div class="container" id="container"> <div id="tableDiv"></div> </div> </div>
css设置
#appContainer { display: flex; flex-direction: column; height: 100%; width: 100%; } #viewDiv { /* height: 50%; */ flex: 1; width: 100%; } .container { display: flex; flex: 1; /* height: 50%; */ width: 100%; }