Question

我正在使用传单js

我需要地图为100％宽度和高度

我知道我可以做身高：100％;如果html，正文是100％。

这在我当前的设置中不起作用，因此我使用绝对定位使其100％高度和宽度。

我需要在顶部标题。

我可以使用绝对定位的顶部向下移动地图，但我不喜欢这样，因为标题的高度可能会改变。

是否可以显示标题并仍然是地图的绝对位置

let mymap = L.map('map').setView([54.5, -2], 6);

			L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
				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: 'mapbox.streets',
				accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
			}).addTo(mymap);

*{
  margin: 0;
  padding: 0;
}

html, body{
  height: 100%;
}

header{
  background: red;
  color: white;
  padding: 10px 0;
}

#map {
    //height: 100%;
    width: 100%;
    
    position: absolute;
    top: 50px;
    bottom: 0;
    left: 0;
    right: 0;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
   
   <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>
   
<header>
  <h2>Header</h2>
</header>
   
<div id="map"></div>

Answer 1

let mymap = L.map('map').setView([54.5, -2], 6);

			L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
				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: 'mapbox.streets',
				accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
			}).addTo(mymap);

*{
  margin: 0;
  padding: 0;
}

html, body{
  height: 100%;
}

header{
  background: red;
  color: white;
  padding: 10px 0;
}

#map {
    height: calc(100vh - 50px);
    width: 100vw;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
   
   <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>
   
<header>
  <h2>Header</h2>
</header>
   
<div id="map"></div>

Answer 2

是

添加

let mymap = L.map('map').setView([54.5, -2], 6);

			L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
				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: 'mapbox.streets',
				accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg'
			}).addTo(mymap);

到标题样式。

*{
  margin: 0;
  padding: 0;
}

html, body{
  height: 100%;
}

header{
  background: red;
  color: white;
  padding: 10px 0;
  z-index: 2;
  position: relative;
}

#map {
    height: 100%;
    width: 100%;
    position: absolute;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
   integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
   crossorigin=""/>
   
   <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
   integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
   crossorigin=""></script>
   
<header>
  <h2>Header</h2>
</header>
   
<div id="map"></div>

delta = (y > 0) ? Math.ceil(delta): Math.floor(delta);

css - 100％覆盖绝对位置，响应最高

2 个答案: