/* 直接为el-container设置高度 */ .el-container { height: 100vh; /* 使用视窗高度 */ /* 或者指定具体高度 */ /* height: 600px; */ } /* 如果需要更精细的控制,可以为内部组件设置高度 */ .el-header, .el-aside, .el-main, .el-footer { /* 根据需要设置高度 */ } /* 例如,固定头部...
import'@/assets/css/global.css' 3、后续给你所有的组件设置height:100%就可以了。 eg: <el-container class="layout-container"> <el-aside width="300px"> </el-aside> <el-container> .layout-container{height:100%; }
height: 100%; } 1. 2. 3. 效果 完整代码 <template> <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> </template> export default { ...
标签上不要添加高度,定位属性,直接设置就OK html,body,#app,.el-container{/*设置内部填充为0,几个布局元素之间没有间距*/padding:0px;/*外部间距也是如此设置*/margin:0px;/*统一设置高度为100%*/height:100%; }
在使用ElementUI中的el-container布局时,遇到子组件高度过高,导致父组件侧边栏和页首随滚动条拖动的情况。 (以最初学Vue的一个练手项目为例) 正文 在网上搜索半天无果。 想要令侧边栏和页首固定,只需将el-container设置一个高度就好: 代码语言:javascript ...
本文使用的方案是,使用CSS和JS结合的方式,首先使用CSS规划出一个自适应高度的容器container,组件放到container的内部使用absolute绝对定位脱离文档流(如此table的高度不会影响到页面布局),然后使用JS获取container的高度tableHeight,将该值设置为el-table的height属...
在上面的示例中,el-container 使用了 height: 100vh; 这个CSS 属性,使得其高度等于视口的高度,即全屏。display: flex; 和flex-direction: column; 这两个属性则使得 el-container 的子元素(el-header、el-main、el-footer)按照列方向排列。 此外,el-header、el-main、el-footer 的高度也分别进行了设置。其中,...
</el-container> 其中el-main可以设定高度,为什么el-header与el-footer就不行呢?这个问题折腾了我大半天,在F12下查看样式,原来有一个element.style, 据说这种样式往往用js动态设置的,如下: element.style{height:60px;} 这个样式即使用/deep/也覆盖不了, 但用important的方式可以进行修改,如下: ...
<el-scrollbar style="height: 100%"> <!-- 要包裹的内容 --> ... </el-scrollbar> 需要设置的内容主要包括一下几个方面: 1、需要制定el-scrollbar的高度; 2、包裹滚动区域el-scrollbar__wrap; 3、横向滚动条el-scrollbar__bar is-horizontal; 4、纵向滚动条el-scrollbar__bar is-vertical; .s...
1.为了防止出现下面的尴尬局面,主页内容撑大,没有滚动条 2.全局给el-main设置固定高度,多出的内容会自动出现滚动条,主要是紫色部分代码 <template><el-container><Aside></Aside><el-container><el-header><Header></Header></el-header><el-main><router-view></router-view></el-main></el-container...