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

使用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>

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

给index.html中html、body、#app及app.vue中.el-container的height设置100%，header设置为固定定位即可。

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" style="height: 100%;"></div><!-- built files will be auto injected -->
</body></html>

app.vue：

<template><el-container style="height: 100%;"><el-header style="height: 80px; position: fixed; z-index: 1; width: 100%;" >Header</el-header><el-container style="padding-top: 80px; height: 100%;"><el-aside width="210px">left</el-aside><el-main style="padding: 15px;">Main</el-main></el-container></el-container>
</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>

让Element-ui的Container布局容器高度百分百显示相关推荐

element布局容器大小_让Element-ui的Container布局容器高度百分百显示
使用Element(2.13.1版本)的Container布局容器布局,按照官网的代码运行后不能撑开整个页面,只能显示一段高度,代码如下: Header left Main 那如何让它高度百分百显示呢 ...
element ui 使用container布局时，容器布满全屏
element ui 使用container布局时,容器布满全屏在使用element ui 布局时,容器一直不能不满全局.在网上搜索了下.解决方法如下: 将包裹container的容器加入一下样式: ...
解决element ui 使用container布局时，容器布满全屏
我们在使用官方的代码时,一般是无法直接布满屏幕的. 很显然,这不是我们想要的效果,我们要把它布满全屏解决代码如下: 实现效果:
Element的Container布局容器布满全屏
摘要:在使用Element(2.10.1版本)的Container布局容器布,发现按照官网的代码运行后,发现不能撑开整个页面,只能显示一段高度官方代码运行后效果: 如何实现不满全屏呢?实现如下: ...
使用container的嵌套_ElementUI 技术揭秘（4）— Container 布局容器组件的设计与实现。...
前言上一篇文章我们分析了 Layout 布局组件的设计和实现,它的应用场景通常是局部布局.对于整个页面的布局,element-ui 提供了 Container 布局容器组件,专门用于 PC 管理后台 ...
Container布局容器
Container布局容器用于布局的容器组件,方便快速搭建页面的基本结构: <el-container>:外层容器.当子元素中包含<el-header>或<el-foo ...
ElementUI Container布局容器
ElementUI介绍常用组件 container布局容器
Container 布局容器
Container 布局容器用于布局的容器组件,方便快速搭建页面的基本结构: <el-container>:外层容器.当子元素中包含 <el-header> 或 <el ...
使用element-ui中的container布局容器
使用container布局容器,最常用的是第六个(自己官网看第六个什么样) 可能有人调整aside的高,始终不能充满屏幕,接下来我说一下我通常用的 1.在App.vue中,style里写: #app ...

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

让Element-ui的Container布局容器高度百分百显示相关推荐

最新文章

热门文章