Jquery Mobile-向頁面內容添加響應性傳單地圖

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%;
}

現在， #map-content #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-向頁面內容添加響應性傳單地圖

問題描述

1 個解決方案

解決方案1
2 已采納 2015-02-05 12:29:04

Jquery Mobile-向頁面內容添加響應性傳單地圖

問題描述

1 個解決方案

解決方案1 2 已采納 2015-02-05 12:29:04

解決方案1
2 已采納 2015-02-05 12:29:04