我需要使Leaflet映射适合JQM页面，该页面还包含一个标题。问题在于页面是可滚动的，如果不滚动，我将看不到地图的底部。我需要整个页面以适合窗口大小，而无需任何滚动。
这是我到目前为止的内容：
http://jsfiddle.net/51Lv7ppt/
<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;
}
最佳答案
将地图的包含元素全部设置为100％时，它将占据主体100％的高度，这意味着包括42px的标题。但是mapPage元素由于标题而在顶部填充了42px，因此在底部额外填充了42px。您可以使用CSS calc进行更正。更改：
#mapPage, #map {
height: 100%;
}
进入：
#mapPage {
height: calc(100% - 42px);
}
#map {
height: 100%;
}
现在
#mapPage不会溢出底部的42px，并且#map-content和#map占#mapPage的100％，即100％-42px；现在它就像手套一样适合。小提琴的叉子：http://jsfiddle.net/Lcu21pdn/
如果您不选择使用
calc，则可以使用纯JavaScript来纠正元素mapPage的高度，或者由于您已经在使用jQuery，因此请在初始化地图之前使用jQuery：var element = $('#mapPage');
element.height(element.height() - 42);
var map = L.map('map').setView([51.505, -0.09], 13);
小提琴的另一个分支：http://jsfiddle.net/pjv22wgk/