UIkit幻灯片高度塌陷怎么解决？

打工人玉丹提问于 2026-03-15 08:36:20 阅读 36

组件

我用UIkit的Slideshow组件做轮播图，图片明明有高度，但容器高度却变成0了，导致下面的内容直接盖上来。试过加 uk-height-viewport 也不行。

这是我的CSS：

.slideshow-container {
  position: relative;
  width: 100%;
}
.uk-slideshow-items > li {
  height: 500px;
}

但实际渲染后.uk-slideshow-items的高度还是0，是不是哪里写错了？

UI框架

我来解答赞 11 收藏

反馈

1 条解答

开发者诗雯 Lv1

问题在于你只给li加了高度，但.uk-slideshow-items本身没高度。直接给.uk-slideshow-items也加上高度：

.uk-slideshow-items {

  height: 500px;

  position: relative;

}

.uk-slideshow-items > li {

  height: 100%;

}

或者更偷懒的办法——在 slideshow 容器上直接用 uk-height-viewport：

<div class="uk-slideshow" uk-height-viewport="min-height: 500">

parent 容器有 min-height 就行，不用整那些 position relative 之类的花活。

2026-03-17 08:16