ElementUI:el-container实现高度占满
el-container实现高度占满
·
官方文档给的代码中,el-container无法占满高度
解决方法:
.el-container {
height: 100%;
}
效果

完整代码
<template>
<div id="user-manage">
<el-container>
<el-header>Header</el-header>
<el-container>
<el-aside width="200px">Aside</el-aside>
<el-main>Main</el-main>
</el-container>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<script>
export default {
name: "UserManageShow"
}
</script>
<style lang="scss" scoped>
@import "./../../style/universal";
#user-manage {
height: $occupy-all;
width: $occupy-all;
background-color: green;
.el-container {
height: 100%;
}
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
height: 60px !important;
}
.el-aside {
background-color: #D3DCE6;
color: #333;
text-align: center;
line-height: 200px;
}
.el-main {
background-color: #9ea4aa;
}
}
</style>
更多推荐




所有评论(0)