Question

我正在尝试使用屏幕顶部的工具栏创建一个简单的基于OpenLayers的地图。我希望工具栏和地图以每个元素周围的边距/边框为中心，没有滚动条。我最终会在工具栏中添加按钮，但首先我想将布局固定下来。

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- <link rel="stylesheet" href="style.css" /> -->

        <script type="text/javascript" src="http://openlayers.org/api/2.12/OpenLayers.js"></script>

        <style>
        html, body {
            height: 100%;
            width: 100%
            margin: 0;
            background-color: black;            
        }

        #toolbar {
            border: solid 1px #999;
            background-color: #ccc;
            margin: 10px;
            width: 100%;
            height: 3%;
            border-radius: 6px;
        }

        #map {
            border: solid 1px #999;
            background-color: #ccc;
            margin: 10px;
            width: 100%;
            height: 95%;

        }

        </style>

        <script type="text/javascript">
        function init() {
            var map = new OpenLayers.Map("map");
            var osm = new OpenLayers.Layer.OSM();
            map.addLayer(osm);
            map.zoomToMaxExtent();
        }

    </script>

    </head>
    <body onload="init()">
        <div id="toolbar"></div>
        <div id="map"></div>
    </body>
</html>

Answer 1

以下是评论中更正的jsfiddle。我只是将css更改为：

 html, body {
            height: 96%;
            background-color: black;            
        }

        #toolbar {
            border: solid 1px #999;
            background-color: #ccc;
            margin-bottom: 10px;
            width: 100%;
            height: 3%;
            border-radius: 6px;
        }

        #map {
            border: solid 1px #999;
            background-color: #ccc;
            margin-bottom: 10px;
            width: 100%;
            height: 100%;
        }

OpenLayers Map无法正确显示工具栏

1 个答案: