Question

我正在寻找一个Google Maps 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;
    }

当尝试在侧边栏中设置滚动列表时，这开始变成一场噩梦。有没有人有一个很好的解决方案，或者我是否正在使用盒子大小调整？

Answer 1

对于像这样的东西，盒子大小是纯粹可选的。有很多方法可以解决这个问题，但我有一个很受欢迎的方法很简单，在IE6这样的旧浏览器中运行良好。

对于您尝试创建的各种框架（侧边栏和Gmaps /内容框架），创建一个设置position:absolute; overflow:auto;的css规则。现在你可以利用CSS绝对定位的一个很酷的技巧。如果您在CSS中同时设置top和bottom，则会自动计算高度。使用左/右宽度也是如此。所以要使我们的两个div 100％高度设置为top: 0; bottom:0;。

如果您希望侧边栏宽300像素并固定在右侧，请设置width:300px; right:0;。对于内容div，请设置right:300px; left:0;。

现在您需要阻止身体滚动条出现。首先，您需要通过将它们设置为0来删除身体的默认边距/填充。此外，您需要设置html＆amp;身体到height:100%;（100％等于观看区域高度），否则他们默认为auto，这是内容的高度。将overflow:hidden添加到body中也是明智的，因为有些浏览器认为`body {height：100％;}表示他们需要显示滚动条。

Here is a quick mockup on JS fiddle showing you how this works.

Answer 2

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

body { height: 100%; margin: 0; padding: 0; overflow: hidden; } #map-canvas { height: 100%; overflow: auto; }

身体：

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

将谷歌地图放置在右侧边栏上，固定标题放在顶部

2 个答案: