CODEWITHSUNDEEP
htmlcss
EarthIsHome
EarthIsHome

Reputation: 735

How can I decrease the height of an element to fit inside the viewport vertically?

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?

I have <div> elements that appear before a leaflet map applet element. The map element extends to height: 100%. My understanding of height: 100% 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.

For example, we'll say the viewport height is 600 pixels and the <div> element that appears before the map element has a height of 100 pixels.

When I set the map's height to 100%, it takes a height of the viewport, 600 pixels. Since I have a <div> element before the map that is 100 pixels in height, the <div> element pushes and extends the full document height to 700 pixels past the viewport height by 100 pixels.

Below is a codepen that better describes my issue as well as code.

http://codepen.io/anon/pen/JdYrxG

html:

<div class="site-header">
</div>
<div class="wrap">
  <div class="spacer">
  </div>

  <!-- leaflet applet css and javascript begin -->
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <!-- leaflet applet css and javascript end -->

  <div id="map"></div>
  <!-- map div -->

  <!-- initializing and setting up map -->
  <script>
    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 &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'examples.map-i875mjb7'
    }).addTo(map);
  </script>


</div>

css:

html, body {height: 100%;}
.spacer {height: 100px; background-color:blue;}
.wrap {height:100%;}
#map {min-height: 100%; }

Edit: As Hugo Silva pointed out, if there is no conent, you can use absolute positioning with top placement as the height of the <div> element. However, I will have text content before the map which will change the height before the map.

Upvotes: 0

Views: 79

Answers (1)

Hugo Silva
Hugo Silva

Reputation: 6958

If there is no content other than the top banner and the map, you can use absolute positioning for the map. So it starts (top: 100px) where the banner ends, and goes all the way to the bottom (bottom: 0;). Example.

Upvotes: 1

Related Questions