css响应式布局左、右上、右中布局

一、布局效果

二、布局代码

      <div class="parent">
        <div class="left">菜单</div>
        <div class="right">
            <div class="right-top">顶部导航</div>
            <div class="right-content"></div>
        </div>
      </div>

三、css样式

      .parent {
        display: flex;
        flex-direction: row;
        width:100%;
        height:100vh;
      }

      .left{
        width: 15%;
        height: 100%;
        background-color: aqua;
        text-align: center;
      }

      .right{
         flex: 1; 
         display: flex;
         height: 100%;
         flex-direction: column; 
      }
      .right-top{
        height: 10%;
        background-color: blueviolet;
      }
     .right-content{
        flex: 1;
        background-color:darkkhaki;
        overflow: auto;
      }