我正在尝试创建一个简单的基于 OpenLayers 的 map ，在屏幕顶部有一个工具栏。我希望工具栏和 map 以每个元素周围的边距/边框为中心，并且没有滚动条。我最终会向工具栏添加按钮，但首先我想确定布局。
<!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>
最佳答案
这是更正后的 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%;
}
关于html - 带有工具栏的 OpenLayers Map 显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18233939/