css - Leaflet全屏与Chrome中CSS位置冲突

Question

我似乎无法全屏显示传单 plugin当我为 map div 设置 CSS 位置属性时，它可以在 Google Chrome 中正常工作。

这是一个 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 位置。