时间戳

首页 > 解决方案 > 使用 OpenLayers 和 CSS 网格布局时如何正确设置对齐方式

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

问题描述

我正在尝试创建一个包含 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 编辑器中运行良好......

标签： javascripthtmlcssopenlayers

解决方案

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

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

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

推荐阅读