问题场景
flex大家都很熟悉就不再详细的解释了,有需要的同学可以自行百度。前一段时间写了一个页面布局如下
HTML部分
<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>
CSS部分
.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