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: 
                "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编辑器中可以正常工作...

Answer 1

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

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

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

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

1 个答案: