ElementUI--实现aside侧边框高度占满整页

要想实现aside侧边框高度占满整页需要设置下面几个地方:

index.css中:

html,body {
      margin: 0;
      height: 100%;
    }

vue文件中,最外层<el-container>标签设置高度:

.container{
    height: 100%
}

<el-menu>标签设置高度:

.menu {
  height: 100%;
}

通过上述三处高度设置,即可实现占满整页的效果:

 

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 要让 elementui 的 <el-aside> 铺满全屏,你可以这样做: 1. 使用 CSS 的 `height: 100vh` 将 <el-aside> 的高度设为视口高度(viewport height),这样 <el-aside> 就可以铺满整个屏幕。 ```css el-aside { height: 100vh; } ``` 2. 如果你想让 <el-aside> 在有滚动条的情况下仍然铺满全屏,你可以使用 CSS 的 `height: 100%` 将 <el-aside> 的高度设为父元素的高度,然后再设置父元素的高度为视口高度。 ```css el-aside { height: 100%; } body, html { height: 100vh; } ``` 注意:如果你使用了 Bootstrap 或其他 CSS 框架,请确保不会与其冲突。 ### 回答2: 要将Element UI中的<el-aside>元素铺满全屏,可以使用CSS样式来实现。 首先,给<el-aside>元素添加一个类名,比如"full-screen",可以在<el-aside>上通过class绑定属性来设置类名。如下所示: <el-aside class="full-screen"></el-aside> 然后,使用CSS样式将这个类名的元素铺满全屏。可以使用以下样式来实现: .full-screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } 上述样式中,设置position为absolute,可以脱离文档流;使用top、left、right和bottom属性将元素定位到整个屏幕的四个边缘,实现铺满全屏的效果。 这样,<el-aside>元素就可以铺满整个屏幕了。 注意:铺满全屏时,需要确保<el-aside>的父元素也具有100%的高度,可以设置父元素的高度为100%来实现。否则,<el-aside>元素可能无法完全铺满屏幕。 希望以上回答能够对您有所帮助。如果还有其他问题,请随时提问。 ### 回答3: 要使`<el-aside>`元素铺满全屏,可以使用CSS样式来实现。可以设置其父元素的宽度为100%,然后设置`<el-aside>`元素的宽度和高度为100%。 首先,在父元素中将其宽度设置为100%: ```html <div class="container"> <el-aside>边栏内容</el-aside> </div> ``` 然后在CSS样式中,将父元素设置为100%宽度和高度,并将`<el-aside>`元素的宽度和高度也设置为100%: ```css <style> .container { width: 100%; height: 100%; } .container el-aside { width: 100%; height: 100%; } </style> ``` 通过以上设置,`<el-aside>`元素将会铺满整个屏幕。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值