title: bootstrap column height 100 of content with openlayers map
body: <p>I am using bootstrap design features for my application. I have an openlayers map in my main cotent.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="well"&gt;
        Header
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-4"&gt;
        &lt;div class="well"&gt;
          &lt;h2&gt;
              Sidebar
          &lt;/h2&gt;
          &lt;ul&gt;
            &lt;li&gt;menu item 1&lt;/li&gt;
            &lt;li&gt;menu item 2&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-8 fill"&gt;
        &lt;div class="map" id="map"&gt; &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and javascript code is like this:</p>
  
  <pre><code>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
     })
  })
  </code></pre>
  
  <p><a href="https://jsfiddle.net/barteloma/L1yLpvz2/4/" rel="nofollow">Working demo is here</a></p>
  
  <p>I want to set map height to fill column(<code>&lt;div class="col-sm-8 fill"&gt;</code>) of page.
  But it does not fill 100%.</p>