bootstrap column height 100 of content with openlayers map
<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>