css - 传单全屏与 Chrome 中的 CSS 位置冲突

Question

我似乎无法全屏显示 Leaflet plugin当我为 map div 设置 CSS 位置属性时，在谷歌浏览器中正常工作。

这是一个 JS Bin来证明我的问题。

查看代码:

  #map { position:absolute; top:100px; bottom:50px; width:100%; }

在 Firefox 和 IE 上， map 正确地进入全屏(即扩展到超出 map div 的尺寸)，但在 Chrome 上，全屏受到 map div 的顶部和底部属性的限制。

关于如何克服这个问题有什么想法吗？

谢谢!

伊莱

编辑于 2014 年 8 月 14 日:感谢@FranceImage 提供了很好的答案，它非常有效。我仍在学习 CSS，因此我确信总有比我做过的更好的方法来做事。例如，我不确定如何使用 float 属性来实现我在页面 here 上使用 position: absolute 所获得的相同效果。 .

如何更改以下代码以使用 float 属性而不是 position: absolute 以达到让我的 map 不与标题和侧边栏重叠的预期效果？谢谢!

#map2 {
    height: 100%;
    width: 100%;
}
#mapcontain {
    position: absolute;
    top: 125px;
    bottom: 50px;
    left: 16%;
    right: 0;
    width: 100%;
}

Answer 1

要使插件正常工作，您不能更改以下内容

#map { position:absolute; top:0; bottom:0; width:100%; }

您必须将 包装在一个容器(另一个 div)中，您将在其中应用您的定位 css

<div id="content">
  <div id="map"></div>
</div>

注意:我不会对页面布局使用绝对定位。绝对位置的好处是元素脱离了正常流，可以覆盖其他元素。它通常用于对话框和弹出窗口。去 float 位置。