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 に答える