我正在使用 bootstrap 来做一个类似这样的简单版本:http://techlist.in/
基本上，我想要一张 map 和一个固定大小和固定位置的右侧栏。
我从这样的事情开始:
HTML:
...
<div class="container">
<div class="span10">
<div id="map_canvas">
</div>
</div>
<div class="span2" style="position:fixed; right:0">
Some stuff
</div>
</div>
...
CSS:
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:40px; /* used for the top navigation bar */
}
但这并没有像预期的那样工作，因为 map 保持 100% 宽度并且“一些东西”标 checkout 现在 map 顶部。有什么提示吗？
更新
事实上，我已经有了导航栏，但我没有在代码中详细说明，我的错。所以基本上 html 页面的整个结构是(添加了缺少的行 div):
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span10">
<div id="map_canvas">
</div>
</div>
<div class="span2" style="position:fixed; right:0">
Some stuff
</div>
</div>
</div>
<!-- include javascript stuff -->
...
</body>
css文件是:
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
height: 90%
width: 80%;
left:0;
right:0;
margin-top:40px;
margin-right:200px;/* used for the top navigation bar */
background: #ccc;
}
如果为 map 留出 200px 的右边距，如何用侧边栏填充边距？
基本上，我需要一个宽度为 200 像素的边栏，并且 map 会根据屏幕大小进行相应调整。
更新 3
我想知道我是否真的需要使用容器/行来实现这种布局(我仍然无法按预期工作)。因为我只需要一个 map 和一个侧边栏(即使调整窗口大小，它也应该始终保留在 map 的右侧)，使用基本的 div/css 而不是 Bootstrap 类是否有意义？
这基本上就是我需要的:http://jsfiddle.net/kuXYq/4/
最佳答案
看看我制作的这个 fiddle ，它可能会有所帮助。
我使用百分比来保持不变
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
height: 90%
width: 80%;
left:0;
right:0;
margin-top:40px;
margin-right:150px;/* used for the top navigation bar */
background: #ccc;
}
关于html - 带有 Bootstrap 的 map 和固定侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17154956/