flex大家都很熟悉就不再详细的解释了,有需要的同学可以自行百度。前一段时间写了一个页面布局如下
<div class="contenter"> <div class="header"> <h3>header</h3> </div> <div class="body"> <div class="left-menu"> <p v-for="item in 100" :key="item">{{item}}</p> </div> <div class="content"></div> </div> </div>
.contenter{ height: 100vh; display: flex; flex-direction: column; background: #fff; .header{ width: 100%; min-height: 64px; text-align: center; background: cadetblue; border-bottom: 1px solid #ccc; } .body{ flex: 1; display: flex; .left-menu{ width: 264px; height: 100%; overflow-y: scroll; background: orange; } .content{ background: olive; width: calc(100% - 264px); height: 100%; } } }
这样的写法菜单部分没有出现预期的滚动条
中间内容区域的高度设置为0