Css 定位谷歌地图，右边有侧边栏，顶部有固定标题

我正在寻找一个谷歌地图div的位置，右边有一个显示列表的边栏。我想让它使窗口不滚动，并且页面上的内容在调整屏幕大小时是流动的

我以前曾尝试使用框大小调整，如下所示：

    #map-wrapper * {
     box-sizing: border-box !important;
     -moz-box-sizing: border-box !important;
     -khtml-box-sizing: border-box !important;
     -webkit-box-sizing: border-box !important;
     -ms-box-sizing: border-box !important;
    }
    #map-container {
     position: absolute;
     width: 100%; height: 100%;
     margin: 0;
     overflow: hidden;
     border-top: 50px solid transparent !important; border-right: 350px solid transparent !important;
    }

---

当试图在侧边栏中有一个滚动列表时，这开始成为一场噩梦。是否有人有好的解决方案，或者我的盒子尺寸选择正确

对于这种情况，框大小完全是可选的。有很多方法可以做到这一点，但我有一个最喜欢的方法，它简单，在像IE6这样的旧浏览器中运行良好

对于您试图创建的各种框架（边栏和Gmaps/内容框架），创建一个css规则，设置

位置：绝对；溢出：自动。现在，您可以利用CSS绝对定位中的一个很酷的技巧。如果在CSS中同时设置了
top
和
bottom
，则会自动计算高度。使用左/右的宽度也是如此。因此，使我们的两个div 100%高度设置
top:0；底部：0

如果希望侧边栏的宽度为300px并定位到右侧，则设置
width:300px；右：0。对于content div，将
设置为right:300px；左：0

现在需要防止出现正文滚动条。首先，您需要通过将默认边距/填充设置为0来删除正文中的默认边距/填充。此外，您还需要将html和body设置为
height:100%（100%等于查看区域高度），否则默认为
auto
，这是内容的高度。在body中添加
overflow:hidden
也是明智的，因为一些浏览器认为`body{height:100%；}意味着他们需要显示滚动条

Elimn的建议对我不起作用，但以下建议起了作用（我在谷歌地图上方创建了一个标题栏）：

在正文中：

<div id="topmenubar" style="position:relative;background:olive;height:40px;top:0;"></div>
<div id="map-canvas"></div>

这是一个CSS问题。与地图无关。
<div id="topmenubar" style="position:relative;background:olive;height:40px;top:0;"></div>
<div id="map-canvas"></div>