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

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

— атлефрен

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-росту.

Переглянути демонстраційний код 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

У мене була така ж проблема і виправлено це за допомогою дисплея: таблиця на головному ділі та відображення комірки таблиці на кожному діві завдяки цій відповіді в 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
джерело

Розміщення картки листівки всередині завантажувальної програми

Список літератури: