<div class="main-layout">
<div class="header">
<h1>头部</h1>
</div>
<div class="content">
<div class="left">
<h1>左</h1>
</div>
<div class="middle">
<h1>中</h1>
</div>
<div class="right">
<h1>右</h1>
</div>
</div>
<div class="footer">
<h1>底部</h1>
</div>
</div>
<style lang="scss" scoped>
/* 样式初始化，也称为四无大法 */
* {
margin: 0;
padding: 0;
}
.main-layout {
.header {
100%;
height: 60px;
background-color: aqua;
text-align: center;
}
.content {
display: flex;
justify-content: space-between;
height: calc(100vh - 60px - 60px);
color: #fff;
}
.left {
100px;
height: 100%;
background-color: red;
text-align: center;
}
.right {
100px;
height: 100%;
background-color: pink;
text-align: center;
}
.middle {
/* flex为1，就是表示占据宽度剩余的全部 */
flex: 1;
height: 100%;
background-color: royalblue;
text-align: center;
}
.footer {
100%;
height: 60px;
background-color: aqua;
text-align: center;
}
}
.el-menu {
background-color: #ffffff;
height: 91.8vh;
overflow-y: auto;
overflow-x: hidden;
color: #777F8F;
}
.el-menu-item {
color: #777F8F;
}
.el-menu-item.is-active {
color: #e1e3ec;
background-color: #072eda;
}