html - 如何降低元素的高度以垂直放置在视口(viewport)内？

Question

我有一个高度为 100% 的 map 元素，它垂直延伸超过视口(viewport)高度。有没有办法缩小 map 元素的高度，使其一直延伸到视口(viewport)底部，但不超过它？

我有<div>出现在传单 map 小程序元素之前的元素。 map 元素扩展到 height: 100% .我对height: 100%的理解是它占据了其父元素的整个高度。在这种情况下，父元素的全高就是视口(viewport)高度。

例如，我们假设视口(viewport)高度为 600 像素，<div>出现在 map 元素之前的元素高度为 100 像素。

当我将 map 的高度设置为 100% 时，它会占用视口(viewport)的高度 600 像素。因为我有一个 <div>高度为 100 像素的 map 之前的元素，<div>元素将整个文档高度插入并扩展到超过视口(viewport)高度 100 像素的 700 像素。

下面是一个代码笔，可以更好地描述我的问题和代码。

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%; }

编辑:正如 Hugo Silva 指出的那样，如果没有内容，您可以使用 top 的绝对定位。位置作为 <div> 的高度元素。但是，我将在 map 之前有文本内容，这将改变 map 之前的高度。

Answer 1

如果除了顶部banner和 map 之外没有其他内容，可以对 map 使用绝对定位。所以它从横幅结束的地方 (top: 100px) 开始，一直到底部 (bottom: 0;)。 Example.