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

Question

我正在尝试创建一个包含 OpenLayers 地图的非常基本的 CSS 网格布局。该布局具有页眉、菜单栏、地图和页脚面板。我遇到的问题是添加 OpenLayers 地图时 - 页脚面板被隐藏，需要向下滚动才能访问页脚内容。我希望整个页面都适合 window 范围，但我遗漏了一些东西...

PS - 我正在使用 Chrome 浏览器作为目标浏览器。

我正在使用静态 HTML 页面来制作布局原型，但我不明白为什么布局被破坏了。然后我在 JSFiddle 上创建了代码来解决这个问题。然而，JSFiddle 在静态 HTML 页面中的工作方式与我希望的一样。

也许我看这篇文章的时间太长了，但如有任何帮助，我们将不胜感激。我已经包含了两个解决方案来尝试理解这个问题。首先是演示我想要的工作示例的 JSFiddle link。其次是不起作用的静态 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>

有趣的是，上面的代码片段在 Whosebug 编辑器中运行良好......

Answer 1

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

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

Whosebug 使用 iframe，如您所见，它的工作方式似乎有所不同。

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

How to correctly set alignments when using OpenLayers and CSS grid layout

html

javascript

css

openlayers