css – 将mapbox / leaflet映射定位在容器div中

我在 Ruby on Rails应用程序中使用Mapbox.对于我的生活,我无法让地图坚持任何简单的CSS.允许地图出现的唯一CSS是给它一个顶部和底部为0的绝对位置.更改高度和宽度以外的任何内容都会导致地图消失.我想让地图集中在容器div中.这是代码：

以下CSS：

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

如果我改变了什么,地图就会消失.我试图给map-container div一个相对位置.这不起作用.我想要的只是将地图包含在div中,看起来似乎并不困难.从2013年开始有一篇关于此的帖子,但它已经过时了.谢谢你的帮助.

当定位静态/相对时,必须为Leaflet设置的唯一css规则(Mapbox是 Leaflet的扩展版本)元素是绝对高度：

#map {    height: 200px;}

示例：http://plnkr.co/edit/vdeyLv?p=preview

这将始终有效,无论嵌套元素的深度如何.如果未设置宽度,则将使用所有可用宽度.当您想要以百分比切换到设置高度时,您需要确保地图元素的所有anchestor元素也具有高度设置：

#html, #body, #map-container {    height: 100%;}#map {    height: 40%;}

示例：http://plnkr.co/edit/rAuNC0?p=preview

我想在Mapbox示例中使用绝对定位背后的原因是,人们无需解释上述内容,因为无论您对地图元素的嵌套程度有多深,它都能正常工作.