我需要能够有一个侧面板来填充左侧页面的高度，并有一个 map 来填充右侧页面的其余部分。我希望侧面板的宽度为 300 像素，而不管浏览器的大小以及右侧的 map 。此外，我无法移动#panel 中的任何 div，它们只是一个接一个地对齐。这是我的 CSS:
body {margin:0;}
#panel {height:100%; width:300px; position:absolute; padding:0;background-color:#8C95A0;}
#div1 {padding:2px; text-align:center}
#div2 {padding:2px; text-align:center}
#div3 {padding:2px; text-align:center}
#div4 {padding:2px; text-align:center}
#div5 {padding:2px; text-align:center}
#div5a {padding:2px; text-align:center}
#div5b {padding:2px; text-align:center}
#div5c {padding:2px; text-align:center}
#div6 {padding:2px; bottom:0px; text-align:center}
#map_canvas {height:100%; width:1200px; left:300px; position:absolute; padding:0;}
如何让#map_canvas 填充页面的其余部分以及如何移动我的 div？
最佳答案
<html>
<head>
<style>
html,body { padding:0; margin:0; height:100%; }
#panel { background-color: #DDD; position:absolute; top:0; left:0; bottom:0; width:300px; }
#map_canvas { background:red; position:absolute; top:0; left:300px; right:0; bottom:0; }
</style>
</head>
<body>
<div id="panel"></div>
<div id="map_canvas"></div>
</body>
</html>
关于javascript - 如何在左侧显示侧面板并在右侧显示 Google maps api Canvas ，填充页面的其余部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10841762/