meg*_*wac 11 html css flexbox leaflet
我似乎无法得到一个(死的简单)Leaflet.map渲染内部flexbox.我认为这可能是一个问题invalidateSize
死简单(破碎)示例:jsbin
如果删除flexbox CSS它将起作用:jsbin
HTML
<body>
<div id="content">
<div id="mapPane"></div>
</div>
</body>
CSS
body {
display: flex;
flex-flow: column wrap;
}
#content {
flex: 1 1;
order: 2;
}
#mapPane {
height: 100%;
}
mis*_*Sam 22
地图窗格没有高度可以继承,因为父级#content从其Flex属性获取高度(告诉它增长).#mapPane因此具有正确的高度 - 0的100%为0.
添加display: flex到#content.它仍然会随着现有的flex: 1财产而增长:
#content {
display: flex;
}
添加flex: 1到#mapPane:
#mapPane {
flex: 1;
}
$(function() {
L.map("mapPane");
});html,
body {
margin: 0px;
height: 100%;
}
body {
display: flex;
flex-flow: column wrap;
}
#content {
flex: 1 1;
order: 2;
display: flex;
}
#mapPane {
flex: 1;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css" rel="stylesheet" type="text/css">
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script><script>L_PREFER_CANVAS = true;</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet-src.js"></script>
<div id="content">
<div id="mapPane"></div>
</div>