设置height为60%无法减小Cesium 3D地图容器高度如何解决

云上老周

2026-10-4

Cesium 3D地图容器高度设置不生效解决方案

根因说明

CSS中使用百分比作为高度单位时，必须保证元素的所有父级元素都有明确的可计算高度值，否则百分比高度无法正常生效。你当前的写法将html、body、#cesiumContainer三个元素的高度同时设置为60%，既没有设置根元素的高度基准，还会出现层层百分比换算的问题，最终导致容器高度不符合预期。

解决方案

方案1：设置根元素高度为基准

如果需要容器高度为整个视口高度的60%，可以先把html、body的高度设置为100%作为基准，再单独给Cesium容器设置60%高度：

<style type="text/css">
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: sans-serif;
}
#cesiumContainer {
    width: 100%;
    height: 60%;
}
</style>

方案2：使用vh视口单位

不需要修改父元素样式的前提下，可以直接用视口单位vh定义容器高度，1vh等于当前视口高度的1%，60vh就对应视口高度的60%：

<style type="text/css">
#cesiumContainer {
    width: 100%;
    height: 60vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: sans-serif;
}
</style>