1

我正在尝试使用屏幕顶部的工具栏创建一个简单的基于 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>
4

1 回答 1

0

这是评论中更正的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%;
        }
于 2013-08-14T17:33:09.470 回答