CSS - 応答トップ

Question

絶対に100％のカバー位置私は私は私が高さで行うことができます知っているマップは、100％の幅と高さ

する必要が

JSリーフレットを使用しています：100％; html、bodyが100％の場合

現在の設定では動作しませんので、絶対位置を使用して100％の高さと幅にしています。

上部にヘッダーが必要です。

絶対位置でトップを使用してマップを下に移動できますが、ヘッダーの高さが変わる可能性があるため、これは嫌です。

それはヘッダと依然として絶対位置マップ

let mymap = L.map('map').setView([54.5, -2], 6); 
 

 
\t \t \t L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
 
\t \t \t \t 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>', 
 
\t \t \t \t id: 'mapbox.streets', 
 
\t \t \t \t accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg' 
 
\t \t \t }).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

有りを示すことができます。

ちょうどあなたのヘッダーのスタイルに

z-index: 2; 
position: relative; 

を追加します。

let mymap = L.map('map').setView([54.5, -2], 6); 
 

 
\t \t \t L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
 
\t \t \t \t 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>', 
 
\t \t \t \t id: 'mapbox.streets', 
 
\t \t \t \t accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg' 
 
\t \t \t }).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>

Answer 2

let mymap = L.map('map').setView([54.5, -2], 6); 
 

 
\t \t \t L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { 
 
\t \t \t \t 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>', 
 
\t \t \t \t id: 'mapbox.streets', 
 
\t \t \t \t accessToken: 'pk.eyJ1IjoidHRtdCIsImEiOiJjajhqeWhjOW8wN2JvMndwbTlqaTV0YjhhIn0.rlysm052tK3vDdZSSg-wQg' 
 
\t \t \t }).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>