首页 文章

在twitter bootstrap容器中100％高的div

提问于
浏览 次
-1

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

根据我从Twitter Bootstrap: div in container with 100% height的理解，我使用"height: 100%; min-height: 100%;"向容器流体div添加了一个css类，但它没有区别：

<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%;
}
css twitter-bootstrap

3 回答

  • 0

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

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

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

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

    回复于
  • 0

    您可以将代码更改为类似于以下代码：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

    回复于
  • 1

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

    似乎/ every / element到map容器需要tall类，而map容器本身需要“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;
}

    不确定这是一个bootstrap要求还是谷歌 Map 要求 .

    （我确实在OP警告中发表评论说我不是CSS大师，但是有人删除了它 . 如果没有误导任何人认为我知道我在做什么，我道歉 . ）

    回复于

相关问题