Question

我有一个高度为100％的地图元素，它垂直延伸超过视口高度。有没有办法缩小地图元素的高度，使其一直延伸到视口的底部，但不能超过它？

我有一个<div>元素出现在传单地图applet元素之前。 map元素扩展为height: 100%。我对height: 100%的理解是它需要其父元素的完整高度。在这种情况下，父元素的完整高度是视口高度。

例如，我们会说视口高度为600像素，而地图元素之前显示的<div>元素的高度为100像素。

当我将地图的高度设置为100％时，它需要视口的高度，600像素。由于我在地图之前有一个<div>元素，高度为100像素，因此<div>元素将整个文档高度推移并扩展到超过视口高度700像素的100像素。

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

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指出的那样，如果没有conent，您可以使用top位置的绝对定位作为<div>元素的高度。但是，我会在地图之前添加文本内容，这将改变地图之前的高度。

Answer 1

如果顶部横幅和地图之外没有其他内容，则可以使用地图的绝对定位。所以它开始（top: 100px）横幅结束，并一直到底部（bottom: 0;）。 Example.

如何降低元素的高度以垂直放入视口内？

1 个答案: