element布局容器大小_让Element-ui的Container布局容器高度百分百显示

使用Element(2.13.1版本)的Container布局容器布局，按照官网的代码运行后不能撑开整个页面，只能显示一段高度，代码如下：

Header

left

Main

那如何让它高度百分百显示呢？

给html、body、#app及最外层.el-container的height设置100%即可。

index.html：

demo1

body {

margin: 0;

height: 100%;

}

app.vue：

Header

left

Main

export default {

name: "App",

components: {

}

};

#app {

font-family: "Avenir", Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

color: #2c3e50;

height: 100%;

}

.el-header,

.el-footer {

background-color: #b3c0d1;

color: #333;

line-height: 80px;

}

.el-aside {

background-color: #d3dce6;

color: #333;

}

.el-main {

background-color: #e9eef3;

color: #333;

line-height: 160px;

}

body > .el-container {

margin-bottom: 40px;

}

.el-container:nth-child(5) .el-aside,

.el-container:nth-child(6) .el-aside {

line-height: 260px;

}

.el-container:nth-child(7) .el-aside {

line-height: 320px;

}