官方文档给的代码中，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>

ElementUI：el-container实现高度占满相关推荐

微信小程序设置高度占满屏幕
因为有个页面需要改变背景颜色,所以要高度占满. 微信小程序设置高度占满屏幕: /*设置根节点,高度占满整个屏幕 */ page{height: 100%; } /*然后设置子节点高度100%*/ .c ...
如何div高度占满全屏无滚动条
如何div高度占满全屏无滚动条 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
CSS技能点--元素高度占满视窗
点此查看全部文字教程.视频教程.源代码本文目录 1. 背景 2. CSS设置满屏 1. 背景我们经常会遇到,需要将网页内容铺满当前窗口的需求. 很多时候,通过CSS去控制比较麻烦,尤其是窗口高度是 ...
上下布局：上部分高度自己撑起，下部分高度占满剩下的全部
1.外层 display: flex; width: 100%:height: 100% : 2. 上:width: 100%: 上不设置flex的值 3. 下: flex: 1; width: 1 ...
微信小程序高度占满整个屏幕
page{ background-color:#111; } page前面没有点
elementUI的container布局设置全屏宽度
进用element UI的 container 布局,发现不能全屏铺满添加了一行代码: .el-container{height:100%;padding:0;margin:0;width:100% ...
css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏
最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{position: relative;margin-left: 24px;margin- ...
容器撑满占满整个高度，垂直居中等
容器撑满占满整个高度,垂直居中等 1.height: 100% 需要先定义,html,body 高度为height: 100%才可以起作用. html, body {widht: 100%;heigh ...
背景平铺两栏自适应（占满剩余高度）fastclick、IScroll双飞翼布局
文章目录背景平铺两栏自适应(占满剩余高度) 需求实现 fastclick插件的使用 IScroll插件的使用(实现区域滚动效果) 条件双飞翼布局(两边固定宽度,中间自适应) 条件实现背景平 ...
微信小程序中使view占满整个屏幕高度的实现方法
前言: 今天做小程序的时候,在项目中要用到一个view占满屏幕高度和宽度,然后再在这个view里放置其他元素的情况. 宽度很简单,直接设置width: 750rpx;或者width: 100%;就行. ...

ElementUI：el-container实现高度占满

官方文档给的代码中，el-container无法占满高度

解决方法：

效果

完整代码

ElementUI：el-container实现高度占满相关推荐

最新文章

热门文章