11

Я пытался изменить высоту моей карты листовки в процентах внутри начальной загрузки, но каждый раз, когда я делаю это, карта не будет рисовать. Таким образом, мне всегда приходится возвращаться к значению px. Я уверен, что это простой параметр, который мне не хватает, так как я новичок в CSS. Вот мой css.

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

web-mapping leaflet bootstrap-framework

— njackson.gis
источник

3

пожалуйста, предоставьте больше информации: как выглядит ваша разметка? Можете ли вы привести минимальный пример, показывающий проблему?

— atlefren

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);
    }

}

что некрасиво, но делает работу.

— Кальвин
источник

6

[ОБНОВЛЕНИЕ 2020]

По состоянию на 2020/02/23 Flexbox имеет 95% поддержку браузеров и является отличным вариантом для того, чтобы сделать Leaflet отзывчивым, используя свойство flex-grow.

Посмотреть демо CodePen здесь

Он настроен так, что он по-прежнему будет отображаться в браузерах, которые не поддерживают Flexbox, только те пользователи должны будут прокрутить abit

¯ \ _ (ツ) _ / ¯

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

[СТАРЫЙ ПОСТ]

Это сработало для меня.

Примечание: я хотел, чтобы на больших экранах моя карта не имела ширины 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;
}

— Тристан Форвард
источник

1

работал на меня. на самом деле лучший ответ на все

— g07kore

5

Проблема в том, что он #mapявляется дочерним, bodyи вы можете указать процентную высоту для дочерних элементов только в том случае, если его родительский элемент имеет явно определенную высоту.

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

Это создаст то, что вы хотите, но полезная площадь никогда не станет больше 75% от 480px. Обычно divколлапс происходит, когда нет контента, но с помощью Leaflet, даже если ваша карта в divнем не рассчитывается при рендеринге, поэтому коллапс при рендеринге. Если вы хотите, чтобы содержимое занимало все вертикальное пространство, вы можете запросить размер окна при загрузке страницы с помощью некоторого JavaScript и таким образом установить высоту.

— RoMaH
источник

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
источник

1

это путь.

— Джордж Сильва

1

Предупреждение! После кросс-браузерного тестирования я обнаружил, что мой ответ ниже работает только для меня в Chrome, а не в Firefox

У меня была та же проблема, и я исправил ее с помощью display: table в главном div и отображения table-cell в каждом div благодаря этому ответу на 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
источник

Таблица размеров листа внутри начальной загрузки

Ссылки: