title: How can I decrease the height of an element to fit inside the viewport vertically?
body: <p>I have a map element with a height of 100% that extends vertically past the viewport height.
  Is there a way to shrink the height of the map element so that it extends all the way to the bottom of the viewport, but not past it?</p>
  
  <p>I have <code>&lt;div&gt;</code> elements that appear before a leaflet map applet element.
  The map element extends to <code>height: 100%</code>.
  My understanding of <code>height: 100%</code> is that it takes the full height of its parent element.
  In this case, the full height of the parent element is the viewport height. </p>
  
  <p>For example, we'll say the viewport height is 600 pixels and the <code>&lt;div&gt;</code> element that appears before the map element has a height of 100 pixels.</p>
  
  <p>When I set the map's height to 100%, it takes a height of the viewport, 600 pixels. Since I have a <code>&lt;div&gt;</code> element before the map that is 100 pixels in height, the <code>&lt;div&gt;</code> element pushes and extends the full document height to 700 pixels past the viewport height by 100 pixels.</p>
  
  <p>Below is a codepen that better describes my issue as well as code.</p>
  
  <p><a href="http://codepen.io/anon/pen/JdYrxG" rel="nofollow">http://codepen.io/anon/pen/JdYrxG</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="site-header"&gt;
  &lt;/div&gt;
  &lt;div class="wrap"&gt;
    &lt;div class="spacer"&gt;
    &lt;/div&gt;
  
    &lt;!-- leaflet applet css and javascript begin --&gt;
    &lt;link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /&gt;
    &lt;script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"&gt;&lt;/script&gt;
    &lt;!-- leaflet applet css and javascript end --&gt;
  
    &lt;div id="map"&gt;&lt;/div&gt;
    &lt;!-- map div --&gt;
  
    &lt;!-- initializing and setting up map --&gt;
    &lt;script&gt;
      var map = L.map('map').setView([33.7622, -84.3855], 13);
       L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Map data &amp;copy; &lt;a href="http://openstreetmap.org"&gt;OpenStreetMap&lt;/a&gt; contributors, ' +
      '&lt;a href="http://creativecommons.org/licenses/by-sa/2.0/"&gt;CC-BY-SA&lt;/a&gt; ' +
      'Imagery © &lt;a href="http://mapbox.com"&gt;Mapbox&lt;/a&gt;',
      id: 'examples.map-i875mjb7'
      }).addTo(map);
    &lt;/script&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>html, body {height: 100%;}
  .spacer {height: 100px; background-color:blue;}
  .wrap {height:100%;}
  #map {min-height: 100%; }
  </code></pre>
  
  <p>Edit:
  As Hugo Silva pointed out, if there is no conent, you can use absolute positioning with <code>top</code> placement as the height of the <code>&lt;div&gt;</code> element.
  However, I will have text content before the map which will change the height before the map.</p>