Jquery 移动 - 向页面内容添加响应式 Leaflet 地图

Question

我需要制作一个适合 JQM 页面的 Leaflet 映射，该页面还包含一个 header。问题是页面是可滚动的，如果不滚动我就看不到地图的底部。我需要整个页面适合 window 大小，没有任何滚动。

这是我目前的情况：

<body>
    <div data-role="page" id="mapPage" data-theme="a"> 
        <div data-role="header" data-position="fixed" data-theme="a">
            <a id="backButton" href="#" data-rel="back" 
                data-transition="slide" data-direction="reverse">Back</a>
            <h1>Map</h1>
        </div> 

        <div id="map-content" data-role="content">
            <div id="map"></div>
        </div>
        <a id="curLoc" data-role="button" data-icon="location" data-iconpos="notext"></a>

    </div> 
</body>

css:

#mapPage, #map {
  height: 100%;
}

#map-content{
  height: 100%;
  padding: 0px; 
  margin:0px;
  z-index: -1;
}
#curLoc{
  position: absolute;
  bottom: 0;
  left: 10px;
}

Answer 1

当您将地图的包含元素全部设置为 100% 时，它将占用 body 的 100% 高度，这意味着包括 header，即 42px。但是 mapPage 元素在顶部填充了 42px，因为 header，所以它在底部有 42px 的额外空间。您可以使用 CSS calc 更正它。变化：

#mapPage, #map {
  height: 100%;
}

进入：

#mapPage {
  height: calc(100% - 42px);
}

#map {
  height: 100%;
}

现在 #mapPage 不会溢出底部的 42px，#map-content 和 #map 占 #mapPage 的 100%，即 100% - 42px；现在它像手套一样合身。

你的 Fiddle 的分支：http://jsfiddle.net/Lcu21pdn/

如果使用 calc 不适合您，您可以使用普通 javascript 或因为您正在使用 jQuery 来更正元素 mapPage 的高度已经，jQuery 在初始化地图之前：

var element = $('#mapPage');

element.height(element.height() - 42);

var map = L.map('map').setView([51.505, -0.09], 13);

你的 Fiddle 的另一个分支：http://jsfiddle.net/pjv22wgk/

Jquery 移动 - 向页面内容添加响应式 Leaflet 地图

Jquery Mobile - Adding a responsive Leaflet map to page content

javascript

css

jquery

jquery-mobile

leaflet