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

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

交互

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

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

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

Cesium 地图应用

我来解答赞 12 收藏

反馈

2 条解答

百里鸿吉 Lv1

遇到这种问题挺头疼的，有时候Cesium会偷偷给你搞个默认高度。你试试这个，直接在JS里设置一下容器的高度，覆盖一下CSS。

复制这个

var viewer = new Cesium.Viewer('cesiumContainer', {

    animation: false,

    timeline: false,

    shouldAnimate: true

});



viewer.container.style.height = '100vh';

这样应该能解决问题，Cesium的初始化之后再强制设置一次高度。

2026-03-21 17:21

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