html中自动分配界面

在项目中需要用到一个自动分配内容的功能,即设置两个并列的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%;
    }

 

posted on 2021-09-01 09:58  一往无前!  阅读(69)  评论(0编辑  收藏  举报