传单全屏与 Chrome 中的 CSS 位置冲突答案

【问题标题】：Leaflet full screen conflicts with CSS position in Chrome传单全屏与 Chrome 中的 CSS 位置冲突
【发布时间】：2014-08-15 01:07:00
【问题描述】：

当我为地图 div 设置 CSS 位置属性时，我似乎无法让 Leaflet 全屏 plugin 在 Google Chrome 中正常工作。

这是一个 JS Bin 来演示我的问题。

查看代码：

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

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

关于如何克服这个问题的任何想法？

谢谢！

伊莱

2014 年 8 月 14 日编辑：感谢 @FranceImage 的出色回答，它的作用就像一个魅力。我仍在学习 CSS，因此我确信总有比我做过的更好的方法来做事。例如，我不确定如何使用 float 属性来实现与 position: absolute 在我的页面here 上的相同效果。

如何更改以下代码以使用 float 属性而不是 position: absolute 以实现我的地图不与标题和侧边栏重叠的预期效果？谢谢！

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

【问题讨论】：

它发生在 JSBin 之外吗？对我来说，mapbox 示例在 Chrome 上运行良好，但在 JS bin 中无法运行
感谢您的评论。是的，它也发生在 JSBin 之外。试试这个link 来测试我的 JS bin。 mapbox 示例在 Chrome 中运行良好，因为未设置 CSS 位置属性。对于非 JS Bin 示例，请尝试我的站点 here。谢谢！

标签： css google-chrome fullscreen leaflet

【解决方案1】：

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

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

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

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

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

【讨论】：