使用openlayers地图引导列高100的内容答案

【问题标题】：bootstrap column height 100 of content with openlayers map使用openlayers地图引导列高100的内容
【发布时间】：2016-08-03 18:43:18
【问题描述】：

我正在为我的应用程序使用引导设计功能。我的主要内容中有一个 openlayers 地图。

<div class="container">
  <div class="row">
    <div class="well">
      Header
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="well">
        <h2>
            Sidebar
        </h2>
        <ul>
          <li>menu item 1</li>
          <li>menu item 2</li>
        </ul>
      </div>
    </div>
    <div class="col-sm-8 fill">
      <div class="map" id="map"> </div>
    </div>
  </div>
</div>

而javascript代码是这样的：

var map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
   view: new ol.View({
       center: [0, 0],
       zoom: 2
   })
})

Working demo is here

我想设置地图高度以填充页面的列（<div class="col-sm-8 fill">）。但它并没有填满 100%。

【问题讨论】：

标签： javascript css twitter-bootstrap openlayers-3

【解决方案1】：

正如other answer中解释的那样，您需要使地图固定位置或动态设置高度。

你也可以使用 100vh..

.map {height:100vh; width: 100%;}

http://codeply.com/go/wpuEToiHM4

【讨论】：

【解决方案2】：

到目前为止，我理解您的问题，我只会在我的 CSS 中创建一个 .fill 类。并将高度设置为 100%

.map {

身高：100%；

}

【讨论】：