Question

当我为地图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属性来实现与我的页面here上的position：absolute相同的效果。

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

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

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

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

1 个答案: