背景： 左侧伸缩导航菜单，右侧的剩余部分为表格，左侧导航隐藏后再显示，表格会出现滚动条
<div class="flex"> <aside style="width:100px">左侧导航</aside> <main class="flex1"> <el-table> </el-table> </main> </div>
<style>
.flex{
display: flex;
}
.flex1{
flex:1;
}
</style>
后修改为 定位
<div>
<aside></aside>
<main>
<el-table>
</el-table>
</main>
</div>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
width: 100%;
box-sizing: border-box;
}
div {
position: relative;
height: 100%;
width: 100%;
}
aside {
position: absolute;
width: 100px;
top: 0;
bottom: 0;
left: 0;
background-color: aquamarine;
}
main {
width: 100%;
height: 100%;
padding-left: 100px;
box-sizing: border-box;
background-color: aliceblue;
}
</style>