How to select the size of Cesium canvas?

I need that cesium canvas to be 60% of the window height, but appears that cesium ignores the css tag for height. Is there a way to select the canvas size?

HTML

<!DOCTYPE html><html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <script src="https://cesiumjs.org/releases/1.60/Build/Cesium/Cesium.js"></script>
    <link href="https://cesiumjs.org/releases/1.60/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
 </head>
<body>
    <div id="cesiumContainer" >
        <script src="cesium.js"></script>
    </div>
</body>
</html>

.css

#cesiumContainer{
overflow: hidden;
width: 100%;
height: 60%;
}

.js

var viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider : Cesium.createWorldTerrain(),
baseLayerPicker : false,
shouldAnimate : true
});

Hey @Volker :wave:,

Check out this Sandcastle that reproduces what you are trying to achieve. However, I didn’t do something different from what you have done in your code. I hope that will help you :blush:

1 Like