写后台管理系统左侧栏不动,右侧随意放大缩小
效果图:
html部分:
<div class="box">
<div class="top"></div>
<div class="min">
<div class="min_left"></div>
<div class="min_right"></div>
</div>
</div>
css部分:
<style type="text/css">
*{
margin:0;
padding: 0;
list-style: none;
}
.box{
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
.top{
height: 100px;
line-height: 80px;
padding: 0px;
background:lightgreen;
}
.min{
width: 100%;
display: flex;
position: absolute;
top: 100px;
bottom: 0px;
overflow: hidden;
}
.min_left{
width: 150px;
overflow-x: hidden;
overflow-y: auto;
background: hotpink;
}
.min_right{
background: skyblue;
flex: 1;
overflow-y: auto;
padding: 10px;
padding-bottom: 1px;
}
</style>