leaflet Mapを画面一杯に表示

画面のタイトル名を表示した下に、leaflet画面を隙間無く表示したいと考えております。

現状

CSSで'style="height:100vh"'を指定したのですが、マップ下が画面からはみ出し、クレジット表記が見えなくなってしまいます。また、左上「＋ボタン」で縮尺を変えた際に、マップが画面一杯となりタイトルが消えてしまいます。

行いたいこと

常にタイトルを表示し、ブラウザサイズを変えても、タイトル下にマップが常に画面一杯となり、マップ下にはクレジット表記が常にされている状態にしたいと考えております。

HTMLCSS
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5
6        <title>Leaflet Map</title>
7
8        <!-- leaflet -->
9        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
10              integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="crossorigin=""/>
11        <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
12                integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
13                crossorigin=""></script>
14    </head>
15
16    <body>
17        <div id="app">
18            <h1>title</h1>
19            <div id="map" style="height:100vh"></div>
20        </div>
21
22        <script>
23            var map = L.map('map').setView([51.505, -0.09], 13);
24
25            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
26                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
27            }).addTo(map);
28        </script>
29
30    </body>
31</html>

行動規範の内容に同意します

回答1件

ベストアンサー

h1で表示しているテキスト分の高さを考慮していないから、そうなっています。

リサイズする処理を設けて、innerHeightからh1要素の高さ分を引いたのを与えるようにすればよいかと。

どこの記事を参考に書いたか忘れましたが、ウィンドウのリサイズイベントを捉えて
マップ表示している#mainのサイズ変更を仕込んでいました。
ネット検索すると、地図の親コンテナに対してリサイズを捉えて実装するってのを見かけますね。

javascript
1        function size() {
2            // リサイズ時の処理
3            var h = $(window).height() - $('#header-container').height() - 2;
4            $('#main').css('height', h);
5            var w = $(window).width() - $('#layer-menu').width();
6            $('#main').css('width', w);
7        }
8        size();
9        $(window).on("resize", function() { size(); });