Question

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

根据我从Twitter Bootstrap: div in container with 100% height的理解，我在容器流体div中添加了一个css类，其中＆＃34; height：100％; min-height：100％;＆＃34;，但没有区别：

<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%;
}

Answer 1

您正在使用CSS ID选择器#tall，但在HTML中指定了高级的类。您需要在CSS中将#tall更改为.tall。

我也在乱用CodePen，你似乎需要根据窗口的高度（vh）指定#map-canvas高度，或指定所有父div的高度和包括 div，您指定希望地图占据的固定高度。请注意，margin-bottom不会影响#map-canvas，并且您不需要指定minimum-height。

查看下面的CodePen，了解一个实现，展示父div如何指定地图的高度。 map div的高度和宽度为父级的100％，并将相应地进行调整：

http://codepen.io/Obsidian-Age/pen/AXzXzv

Answer 2

您可以将代码更改为与以下代码类似： HTML更改为：

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

和css更改为

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

这是预览：

http://codepen.io/mhadaily/pen/RRdXpY

Answer 3

我/我/我可能已根据Pete的评论对此进行了整理（所以这真的是/他/他的答案。）

似乎/ every / element到地图容器需要高级类，地图容器本身需要“height：100％; min-height：600px;”，类似于：

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

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

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

不确定这是自举要求还是google地图要求。

（我确实在OP警告中发表评论说我不是CSS大师，但是有人将其删除。如果没有误导任何人误以为我知道自己在做什么，我会道歉。）

在twitter bootstrap容器中100％高的div

3 个答案: