element-ui height:100%不生效解决方案

最新推荐文章于 2024-05-22 10:58:50 发布

原创最新推荐文章于 2024-05-22 10:58:50 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #css

在使用Element-UI组件库时，遇到侧边栏无法通过设置height:100%填充全屏的难题。问题的关键在于单纯设置高度百分比无法实现预期效果。解决方案是通过使用固定定位(position: fixed)配合width:100%和height:100%，使侧边栏能够完整覆盖屏幕左侧。这种方法成功地让侧边栏铺满了整个屏幕的左侧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用element-ui组件时，想要侧边栏的高度占满屏幕的左侧边栏，单纯在样式中设置了height:100%，然而并不生效。

.el-menu {
    height: 100%;
    border: none;
    h3 {
      color: #fff;
      text-align: center;
      line-height: 48px;
    }
  }

解决方案：

当想要元素铺满整个屏幕的时候，采用绝对定位或者固定定位

定位+width：100%;height:100%

  .el-menu {
    position: fixed;
    height: 100%;
    border: none;
    h3 {
      color: #fff;
      text-align: center;
      line-height: 48px;
    }
  }

这样，左侧边栏就可以铺满整个左侧边的屏幕了。