位置谷歌地图与侧边栏右侧固定头顶部

我在找一个定位谷歌地图的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; 
    }

这将启动试图在侧边栏的滚动列表时成为一场噩梦。有没有人有一个很好的解决方案，还是我在正确的轨道与框大小？

来源

2013-02-28 AKN

这是一个CSS问题。与地图无关。 – Rafe 2013-03-01 04:08:04

箱尺寸是这样的事情纯粹是可选的。有很多方法可以解决这个问题，但我拥有一种简单的方法，在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 &身体height:100%;（100％等于可视面积高度），其他明智的，他们默认为auto这是内容的高度。这也是明智添加overflow:hidden身体，因为有些浏览器认为`体{身高：100％;}意味着他们需要显示滚动条。

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

来源

2013-03-04 05:00:13 Elimn

Elimn的建议并没有为我工作，但下面没有（我创建了谷歌地图上方的标题栏）：

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>

来源

2013-12-01 03:11:30

位置谷歌地图与侧边栏右侧固定头顶部

回答

相关问题