Cesium中地图容器高度不生效怎么办？

小诗雅提问于 2026-03-12 14:28:19 阅读 12

交互

我在用Cesium加载3D地图时，发现设置的容器高度总是150px，不管我怎么改CSS都没用，明明代码里写了100vh啊。

试过在父级加height: 100%、也试过用!important，但开发者工具里看还是被覆盖成固定高度。是不是Cesium内部动态设置了样式？

#cesiumContainer {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
}

Cesium 地图应用

我来解答赞 1 收藏

反馈

1 条解答

UE丶鑫丹 Lv1

问题应该出在html和body没设高度。你写了100vh，但html和body默认是内容高度，不是视口高度，所以100%这种相对单位不生效。

解决方法很简单，先把html和body的高度固定住：

html, body {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

  overflow: hidden;

}



#cesiumContainer {

  width: 100%;

  height: 100%;

}

如果你用的是100vh，那得确保没有父元素遮挡。有些人喜欢在html和body上用100vh，容器用100%，效果一样。

还有一种情况是Cesium运行时会动态修改容器样式，如果上面方法不行，可以试试在加载后用JS强制设置：

const container = document.getElementById('cesiumContainer');

container.style.height = '100vh';

或者用CSS覆盖：

html body #cesiumContainer {

  height: 100vh !important;

}

优先级提上去，基本就能覆盖掉Cesium内部可能存在的样式了。

2026-03-12 15:02