openlayers F11全屏显示

最新推荐文章于 2024-12-17 15:50:13 发布

aiqi1964

最新推荐文章于 2024-12-17 15:50:13 发布

阅读量334

点赞数

原文链接：http://www.cnblogs.com/mr-hu2009/p/10869237.html

版权

本文详细阐述了当地图初始化尺寸非全屏时，如何通过CSS实现全屏浏览下地图容器高度100%的解决方案。关键在于为地图元素设置全屏状态下的高度属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当地图的初始化宽度和高度都不是100%的时候，F11浏览器全屏的时候只会宽度的100%，高度还是原来地图的高度。

解决

解决此问题的关键还是在于全屏的时候地图的容器的高度也得变成100%。因此，解决代码如下：

html,
body,
#map{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #0f1467;
}

#map{
  height: 50%;
}

#map:-moz-full-screen {
  height: 100%;
}
#map:-webkit-full-screen {
  height: 100%;
}
#map:-ms-fullscreen {
  height: 100%;
}

#map:fullscreen {
  height: 100%;
}

转载于:https://www.cnblogs.com/mr-hu2009/p/10869237.html