使用Element(2.13.1版本)的Container布局容器布局,按照官网的代码运行后不能撑开整个页面,只能显示一段高度,代码如下:
<el-container> <el-header>Header</el-header> <el-container> <el-aside width="210px"> left </el-aside> <el-main>Main</el-main> </el-container> </el-container>
那如何让它高度百分百显示呢?
给html、body、#app及最外层.el-container的height设置100%即可。
index.html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>demo1</title> <style> html, body { margin: 0; height: 100%; } </style> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
app.vue:
<template> <div id="app"> <el-container style="height: 100%;"> <el-header>Header</el-header> <el-container> <el-aside width="210px"> left </el-aside> <el-main>Main</el-main> </el-container> </el-container> </div> </template> <script> export default { name: "App", components: { } }; </script> <style> #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; } </style>