Question

我的宣传单画布目前看起来如下，高度为700px：

但是我希望它的高度为100％，以便占据整个空白区域。

height：100％在地图画布的CSS属性中不起作用。我找到了一些解决方案，但它们只适用于Google地图。

是否有人有解决方案，即使它只是一种解决方法？谢谢！

Answer 1

使用height: 100%确实有效，它只需要父容器的大小（working demo）：

html, body { 
    height: 100%; 
}
#map {
  width: 100%;
  height: 100%;
}

Answer 2

最好的方法是使用CSS长度单位vh和vw。这些允许块级HTML元素具有相对于视口大小的维度，而不是其父元素的大小（如%所做的那样）。

e.g：

#map {
  width: 100vw;
  height: 100vh;
}