当我尝试设置高度动态时地图不加载答案

【问题标题】：Map Doesn't Load when I try to set the height dynamic当我尝试设置高度动态时地图不加载
【发布时间】：2014-01-03 09:43:54
【问题描述】：

当我在我的页面上加载地图时，它可以通过以下代码正常加载：

<div id="googleMap" style="width: calc(100% - 2px); height: 800px;"></div>

但是，当我尝试以这种方式加载它时，它不会加载，我不明白为什么。

<div id="googleMap" style="width: calc(100% - 2px); height: calc(100% - 2px);"></div>

谁能解释为什么这没有加载？它们是否是任何推荐的替代品，以便我可以让地图的高度动态适合我的 div？它不一定需要有两个像素的空间。谢谢！

【问题讨论】：

calc 应该在这里做什么？这会被 javascript 拾起吗？无论如何，尝试从百分比中减去像素可能无济于事。尝试先获取以px为单位的父元素的高度，然后从中减去2px

【解决方案1】：

当您设置基于百分比的高度时，还需要定义父级的高度。如果父级的高度为0，则calc(100% - 2px) 的高度等于0。鉴于这适用于基于固定 px 的高度，您只需设置父级的高度即可使其工作。

假设直接父母的身高是用基于百分比的值定义的，请使用以下内容：

html, body { height:100%; }

这里有一个example 演示了这一点。

或者，如果元素被另一个元素包裹，则使用基于px 的固定高度。 (example)

【讨论】：

【解决方案2】：

尝试给它一个最小高度，如果没有高度，我认为地图不会渲染。

#googleMap
{
  min-height:10px;
}

【讨论】：