一、布局效果

二、布局代码

      <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;}