Question

我需要将一个Leaflet地图放在一个JQM页面中，该页面还包含一个标题。问题是页面是可滚动的，我无法滚动看到地图的底部。我需要整个页面以适应窗口大小，而不需要任何滚动。

这是我到目前为止所做的：

<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％时，它需要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/

Jquery Mobile - 将响应的Leaflet地图添加到页面内容

1 个答案: