使用OpenLayers和CSS网格布局时如何正确设置对齐方式

Question

我正在尝试创建一个包含OpenLayers映射的非常基本的CSS网格布局。 该布局具有页眉，菜单栏，地图和页脚面板。 我遇到的问题是添加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: "hh" "mc" "mf"; 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编辑器中可以正常工作...

Answer 1

您需要更改.map样式以减去页眉，页脚和间隙的高度

        .map {
            height: calc(100% - 67px);
            width: 100%;
            font-size: initial;
        }

正如您所观察到的，Stackoverflow使用了一个iframe，它的工作方式似乎有所不同。

使用OpenLayers和CSS网格布局时如何正确设置对齐方式

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-11-27 19:39:52

使用OpenLayers和CSS网格布局时如何正确设置对齐方式

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-11-27 19:39:52

解决方案1
1 已采纳 2018-11-27 19:39:52