在Twitter引导程序容器中100％高div

Ian 发表于 Dev

伊恩

我正在尝试将100％高的Google地图放入Twitter Bootstrap容器中，但它呈现为0px高。

从我对Twitter Bootstrap的了解：高度为100％的容器中插入div，我向容器流体div中添加了一个css类，高度为：“ 100％；最小高度：100％；”，但这没有什么区别：

<body>
  <div class="container-fluid tall">
    <div class="row">
      <div class="col-md-6">
        <div id="map-canvas"></div>
       </div>
...

#map-canvas {
  width: 100%;
  height: 100%;
  margin-bottom: 15px;
  border: 2px solid #000000;
}

.tall {
  height: 100%;
  min-height: 100%;
}

伊恩

我/认为/根据皮特的评论，我可能已经解决了这个问题（因此，这确实是/他/的答案。）

似乎/ every /元素直到地图容器都需要high类，并且地图容器本身需要“高度：100％；最小高度：600像素；”，例如：

html,
body {
  height: 100%;
  min-height: 100%;
}

.tall {
  height: 100%;
  min-height: 100%;
}

#map-canvas {
...
  height: 100%;
  min-height: 600px;
}

不知道这是引导程序要求还是Google映射要求。

（我在OP中确实提出了警告，警告说我不是CSS专家，但有人将其删除。如果没有这种错误，我会为任何人误以为我知道我在做什么感到抱歉。）

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。