11

我一直在尝试将我的传单地图的高度更改为引导程序内的某个百分比，但是每次我做时地图都不会绘制。因此，我总是必须恢复为px值。我很确定这是我是CSS新手，因此我不希望使用的简单设置。这是我的CSS。

<style type="text/css">
  body {
    padding-top: 60px;
    padding-bottom: 40px;
  }
  #map {
    height: 75%;
  }
</style>

web-mapping leaflet bootstrap-framework

— 杰克逊
source

3

请提供更多信息：您的标记外观如何？您能否提供一个显示问题的最小示例？

— atlefren 2013年

12

我一直在引导程序中遇到地图高度问题，因为当地图的宽度更改为100％的高度时顶部的边距可能会有所不同（但顶部有导航栏），我最终使用

var mapmargin = 50;
$('#map').css("height", ($(window).height() - mapmargin));
$(window).on("resize", resize);
resize();
function resize(){

    if($(window).width()>=980){
        $('#map').css("height", ($(window).height() - mapmargin));    
        $('#map').css("margin-top",50);
    }else{
        $('#map').css("height", ($(window).height() - (mapmargin+12)));    
        $('#map').css("margin-top",-21);
    }

}

这很丑陋，但却能完成工作。

— 加尔文
source

6

[2020年更新]

自2020年2月23日起，Flexbox具有95％的浏览器支持，是使用flex-grow属性使Leaflet响应的绝佳选择。

在此处查看CodePen演示

进行了设置，使其仍可以在不支持Flexbox的浏览器上呈现，只是那些用户必须稍微滚动一下

¯\ _（ツ）_ /¯

================================================== ==========

[旧帖]

这对我有用。

注意：我希望我的地图在大屏幕上不要为100％宽度，所以我添加了

.container{max-width:60em;} /* Remove for full screen */

的HTML

<div id="map-holder">
  <div class="container fill">
    <div id="map"></div>
  </div>
</div>

的CSS

#map
{
    width: 100px;
    height:100px;
    min-height: 100%;
    min-width: 100%;
    display: block;
}

html, body
{
    height: 100%;
}

#map-holder{
    height: 100%;
}

.fill
{
    min-height: 100%;
    height: 100%;
    width: 100%;
    max-width: 100%;
}

.container{
    max-width:60em;
    padding: 0.2em;
}

— 特里斯坦前进
source

1

为我工作。实际上是最好的答案

— g07kore

5

是这个问题#map是一个孩子body，你只能为子元素指定百分比的高度，如果它的父有一个明确定义的高度。

<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
        height: 480px;
        }
    #map {
        height: 75%;
        }
</style>

这将创建您想要的东西，但是可用区域永远不会增长到大于480px的75％。通常，div当没有内容时，折叠会折叠，但是使用Leaflet时，即使您的地图div不在其中，也不会在渲染时进行计算，因此在渲染时会崩溃。如果您希望内容占据所有垂直空间，则可以在页面加载时使用一些JavaScript查询窗口大小，并以此方式设置高度。

— 罗马
source

3

只需height:100%在html和body标记中添加一个，即可使它们具有定义的高度，并且可以用作参考，它应该可以正常工作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Height sample</title>
<style type="text/css">
    html, body { 
        height:100%
    }
    #map {
        margin: 1em auto;
        height:70%;
        border: 2px dashed black;
    }                                                                                                                                                                                                            
</style>
</head>
<body>
    <h1>The map</h1>
    <div id="map"></div>
</body>
</html>

参考文献：

与Stackoverflow相关的问题：百分比高度HTML 5 / CSS
您还可以看一下W3C CSS 2.1标准，以了解盒子模型和有关计算高度和边距的部分

— pconcepcion
source

1

这是要走的路。

— 乔治席尔瓦

1

警告！经过跨浏览器测试后，我发现下面的答案仅对Chrome有效，对Firefox不起作用

我有相同的问题，并通过在主要div上使用display：table并在每个div上显示table-cell来解决此问题，这要感谢stackoverflow上的这个答案：

<div class="container body-container">

  <div class="col-md-6 side-container">
    <p>some stuff to</p>
    <p>fill the</p>
    <p>first colum</p>      
  </div><!-- /other column -->
  <div class="col-md-6 side-container">
    <div id="map"></div>
  </div><!-- /leaflet column -->
</div><!-- /container -->

和CSS：

.body-container {
    display: table;
}
.side-container {
  float: none;
  display: table-cell;
  height:0;
}
#map {
    height: 100%;
}

— RvdBerg
source

引导程序中调整传单地图的大小

参考文献：