Phonegap-Leaflat地图填满了剩余的网站

Phonegap -Leaflat map fill up remaining site

本文关键字：网站 地图 Phonegap-Leaflat      更新时间：2023-09-26

我使用Leaflat来显示地图，我希望它填充剩余的空间，为此我想使用弹性框，但地图甚至没有显示，只有当我将其定义为以px为单位的高度时，它才会显示。

JavaScript

    var map = L.map('map').setView([51.505, -0.09], 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);

CSS

    body {
      padding: 0 !important;
      margin: 0 !important;
      height: 100% !important;
      display: flex !important;
      flex-flow: column wrap !important;
      height: 100% !important;
    }
    #content {
        width: 100%;
        height: 100%;
    } 
    .content-box {} .content-box .run {} 
    .content-box .run.data {
      order: 1;
      flex: 0 1 auto;
    }
    .content-box .run.data > h1 {
      text-align: center;
    }
    .content-box .run.map {
      order: 2;
      flex: 1 1 auto;
      width: 100%;
    }

HTML

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>App</title>
      <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
      <link href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
    </head>
    <body>
      <div id="app">
        <div id="content" class="content-box">
          <div class="run data">
            <p>Some content</p>
            <p>....</p>
          </div>
          <div class="run map" id="map">
          </div>
        </div>
      </div>
    </body>
</html>

我在stackoverflow上尝试了一些类似问题，但没有一个能解决我的问题。如果我在css文件中将position: fixed;添加到#content，并将height: 100%;添加到.content-box .run-mapI，则地图的大小在第一时间是正确的，但在单击comething后出现故障，不再正确，我尝试了position: fixed;，但这没有帮助。如何使地图填充我的网站的其余部分？

我所做的是将html高度设置为100%。

html {
    height: 100%;
}
相关文章：