Map renders blank with no console error

• The container border is visible but the map area is empty, and tile requests in the network panel return 200.
• Resizing the window suddenly makes the map appear.
• With height: 100% inside an auto-height parent, the computed height at init is 0.

1. Add a red outline to the map container and confirm whether it has any size.
2. If size is zero, walk up the parent height chain and switch to a flex layout with min-height: 0.
3. If size is fine but the map is white, type the library global (L, ol, Cesium) in the console to confirm it loaded.
4. If the library loaded, check whether init ran while the container was hidden, then call map.invalidateSize() or map.updateSize() once it is visible.
5. If all of that passes, inspect z-index and absolutely positioned masks covering the canvas.

Give the container a definite height (flex: 1 1 auto with min-height: 0, or an explicit pixel height), initialise after the container is visible, and call map.invalidateSize() or map.updateSize() after any show/hide.

/* 错误写法：body 没给高度，100% 直接失效 */
html, body { margin: 0; }
#map { height: 100%; }

/* 正确写法一：从根节点一路给高度 */
html, body { height: 100%; margin: 0; }
#map { height: 100%; }

/* 正确写法二：用 flex 让地图吃掉剩余空间 */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; }
header { flex: 0 0 48px; }
#map { flex: 1 1 auto; min-height: 0; }

typeof L        // 'undefined' 表示 Leaflet 没加载上
typeof ol       // 'undefined' 表示 OpenLayers 没加载上
typeof Cesium   // 'undefined' 表示 Cesium 没加载上

• Setting height: 100vh on the map div and breaking the page header and footer layout instead of fixing the parent chain.
• Calling invalidateSize() before the container is laid out, which recalculates against the same 0x0 size.