Leaflet: 地图 div 不支持 100% 高度 CSS 属性

JSFiddle 出于某种原因没有为我打开，但 Leaflet 确实支持 100% 的高度而没有问题——你可能做错了什么。 请参阅http://leafletjs.com/examples/mobile.html

我错了。 我没有将 height 属性设置为 body 标签。 谢谢

$(window).on("resize", function () { $("#map").height($(window).height()); map.invalidateSize(); }).trigger("resize");

使用此代码使其响应窗口的高度

上面 Omgan 的评论对我来说非常适合传单 1.0.2
我添加了一个小改动：
.height() - 220);
因为这帮助我调整了与我正在使用的菜单的对齐方式。 此外，我需要删除我试图用来解决问题的所有 CSS。

这很好用，但设置适用于 (- 40)
$(window).on("resize", function () { $("#map").height($(window).height()-40); map.invalidateSize(); }).trigger("resize ");

我遵循了 Omgan、dstrickler 和 josejaner 所做的事情。 此外，由于我在一个单独的函数 initMap() 中初始化了我的地图，所以我不得不在那里触发调整大小，如下所示......

function initMap() { map = L.map('mapid').setView([40.060620, -77.523182], 17); L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { maxZoom: 18, id: 'streets-v9', accessToken: 'xxxxx' }).addTo(map); tilesLoaded = true; $("#mapid").trigger("resize") }

在 CSS 中使用高度，如下所示：

#map { height: calc(100% - 44px); width: 100%; position: absolute !important; }
全屏工作正常，但边界不再正常工作。 所有标记均不可见。 但是，如果我将高度设置为 800px，则绑定工作正常。

@stripathix如果您认为这是一个问题，我建议您打开一个新的，并附上一个清晰的示例来说明该问题。

鉴于您提供的信息，这听起来不太可能是传单问题，而是您的应用程序如何使用它的问题。 例如，如果您的地图容器在地图初始化后曾经_changes_ 大小，请确保在地图实例上调用invalidateSize 。

您使用包装容器设置为固定或绝对位置，以使高度 100% 正常工作。
例如

.map-wrapper { width: 100%; height:100%; position: fixed;}
#map { width: 100%; height:100%; position: relative;}

见https://jsfiddle.net/robertpribpolestar/xg41w12v/3/

当然，这意味着您必须使用固定和绝对定位，这可能很烦人，但比必须包含在 JS 中观看浏览器调整大小要好。

就我而言，这个 css 解决了这个问题：

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

并给它的容器position: relative
你可以使用vw和vh来让你的容器也响应。

@dhanyn10 position: absolute;成功了！

$(window).on("resize", function () { $("#map").height($(window).height()); map.invalidateSize(); }).trigger("resize");

使用此代码使其响应窗口的高度

它的工作非常好，我在过去的几个小时里搜索了这种解决方案，但最后我确实找到了它，我真的很高兴。 我也测试了它的响应能力，这是正确的。

哦，FFS 只需使用100vh 。 并阅读https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units关于vh和vw以及100%的确切含义。