/* 直接为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-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...
{clear:both;height:30px;background:#0000ff;}-->我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在左边我在正文我在正文我在正文我在正文我在正文我在正文我在正文我在正文<...
// 设置表格内容的高度 this.container.style.height = `${contentHeight}px`; }, update(el, binding) { // 数据发生变化时重新计算表格内容的高度 this.inserted(el, binding); }, componentUpdated(el, binding) { // 更新表格内容的高度 this.inserted(el, binding); } }); ``` 使用自定义指令后,...
{},// 可滚动部分自定义样式noresize:Boolean,// 如果 container 尺寸不会发生变化,最好设置它可以优化性能tag:{// 生成的标签类型,默认使用 `div`标签包裹type:String,default:'div'}}//个人觉得自定义样式通常使用在el-scrollbar中包裹的元素类型都为一种的情况下,所以按需决定是否设置wrap、view的style和...