Я пытаюсь создать очень простой CSS-макет сетки, включающий карту OpenLayers.Макет имеет панели заголовка, меню, карты и нижнего колонтитула.Проблема, которую я получаю, заключается в том, что при добавлении карты OpenLayers панель нижнего колонтитула скрыта и требует прокрутки вниз для доступа к содержимому нижнего колонтитула.Я хочу, чтобы вся страница помещалась в экстентах окна, но мне чего-то не хватает ...
PS - я использую браузер Chrome в качестве целевого браузера.
Я использовал статическийHTML-страница для прототипирования макета, но я не мог понять, почему макет не работает.Затем я создал код на JSFiddle, чтобы поставить с этим вопросом.Однако JSFiddle работает так, как я надеялся, на статической HTML-странице.
Возможно, я слишком долго смотрел на это, но любая помощь приветствуется.Я включил два решения, чтобы попытаться понять проблему.Во-первых, ссылка JSFiddle, которая демонстрирует рабочий пример того, что я хочу.Во-вторых, статический HTML-код, который не работает (обратите внимание, как вам нужно прокрутить вниз, чтобы увидеть содержимое нижнего колонтитула)
1 - код JSFiddle.https://jsfiddle.net/w0s4xmc0/54334/
2- Статический HTML
<html>
<head>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<style>
html, body {
height: 100%;
margin: 0;
}
.map {
height: 100%;
width: 100%;
}
#container {
height: 100%;
display: grid;
grid-gap: 1px;
grid-template-columns: 150px auto;
grid-template-rows: 40px auto 25px;
grid-template-areas:
"h h"
"m c"
"m f";
background-color: black;
font-size: 20pt;
text-align: center;
}
#header {
grid-area: h;
background-color: red;
}
#menu {
grid-area: m;
background-color: orange;
}
#content {
grid-area: c;
background-color: pink;
}
#footer {
grid-area: f;
background-color: purple;
font-size: 10pt;
text-align: center;
}
</style>
<title>OpenLayers example</title>
</head>
<body>
<div id='container'>
<div id='header'>Header</div>
<div id='menu'>Menu</div>
<div id='content'>
<div id="map" class="map">
<script>var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([153.0251, -27.4698]),
zoom: 8
})
});
</script>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Как ни странно, приведенный выше фрагмент кода отлично работал в редакторе stackoverflow ...