el-aside无法铺满屏幕

第一步:在App.vue中写入样式

<style scoped>
#app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

第二步:调节el-aside样式(注意如果没有背景色的话,看起来还是没有铺满)

<style scoped>
.el-aside{
  height: 100vh;
}
</style>

第三步:第二步的时候其实已经铺满了,但是没有背景颜色,视觉上看不到,所加上颜色:

<style scoped>
.el-aside{
  height: 100vh;
  background-color: rgb(84, 92, 100)
}
</style>

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答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>`元素将会铺满整个屏幕
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

文子阳

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值