3

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

我之前曾尝试使用 box-sizing ，如下所示：

    #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;
    }

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

4

2 回答 2

0

对于这样的事情，Box-sizing 完全是可选的。有很多方法可以解决这个问题，但我有一种喜欢的方法，它既简单又适用于 IE6 等旧浏览器。

对于您尝试创建的各种框架（侧边栏和 Gmaps/内容框架），创建一个设置position:absolute; overflow:auto;. 现在您可以利用 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为内容的高度。添加到 body 也是明智的overflow:hidden，因为一些浏览器认为 `body{height:100%;} 意味着他们需要显示滚动条。

这是一个关于 JS fiddle 的快速模型，向您展示了它是如何工作的。

于 2013-03-04T05:00:13.187 回答
0

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>
于 2013-12-01T03:11:30.390 回答