UIkit 布局中子元素高度不随父容器撑开怎么办？

程序员付楠提问于 2026-03-26 19:35:19 阅读 20

组件

我用 UIkit 的 uk-grid 做了一个两栏布局，左边是侧边栏，右边是主内容区。明明给父容器设了 min-height: 100vh，但子项的高度却没被撑满，背景色只显示内容高度那一点。

试过加 uk-height-1-1 和 style=”height: 100%” 都没用，是不是 grid 子项默认不继承高度？我的结构大概是这样：

<div class="uk-grid uk-child-width-1-2" uk-grid>
  <div class="uk-background-muted">Sidebar</div>
  <div class="uk-background-primary">Main Content</div>
</div>

我来解答赞 3 收藏

反馈

1 条解答

开发者景景 Lv1

UIkit 的网格系统有时候确实会让高度继承变得麻烦。给你一个效率更高的解决方法，直接在父容器上加 uk-flex 这个类，然后在子元素上用 uk-flex-1 来强制撑开。

具体修改成这样：



<div class="uk-grid uk-child-width-1-2 uk-flex" uk-grid>

  <div class="uk-background-muted uk-flex-1">Sidebar</div>

  <div class="uk-background-primary uk-flex-1">Main Content</div>

</div>

注意要确保你的 UIkit 已经引入 flex 模块，不然这个方案不会生效。我以前也被这个问题困扰过，后来发现 UIkit 自带的 flex 工具类才是最高效的解法，比自己写一堆 height 样式要干净得多。

记得检查一下其他样式有没有冲突，有时候外部样式可能会影响 flex 的表现。这个方法能让你的布局更稳定，也不会影响性能。

2026-03-26 19:39