11

Próbowałem zmienić wysokość mojej mapy ulotki na wartość procentową wewnątrz bootstrapu, ale za każdym razem mapa nie będzie rysować. Dlatego zawsze muszę wracać do wartości px. Jestem prawie pewien, że to proste ustawienie, którego mi brakuje, ponieważ jestem nowicjuszem w CSS. Oto mój css.

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

web-mapping leaflet bootstrap-framework njackson.gis
źródło

3

podaj więcej informacji: jak wygląda twój znacznik? Czy możesz podać minimalny przykład pokazujący problem?

atlefren

12

Zawsze miałem problemy z wysokością mapy podczas ładowania, ponieważ margines u góry może być inny, gdy szerokość mapy zmienia się, aby uzyskać 100% wysokości (ale z paskiem nawigacyjnym u góry).

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

}

co jest brzydkie, ale wykonuje pracę.

Calvin
źródło

6

[AKTUALIZACJA 2020]

Od 2020/02/23 Flexbox obsługuje 95% przeglądarki i jest świetną opcją, aby ulotka reagowała przy użyciu właściwości flex-grow.

Zobacz prezentację CodePen tutaj

Jest skonfigurowany tak, aby nadal wyświetlał się w przeglądarkach, które nie obsługują Flexbox, tylko ci użytkownicy będą musieli przewijać abit

¯ \ _ (ツ) _ / ¯

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

[STARY POST]

To zadziałało dla mnie.

Uwaga: chciałem, aby moja mapa nie miała 100% szerokości na dużych ekranach, więc dodałem

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

Naprzód Tristan
źródło

1

pracował dla mnie. właściwie najlepsza odpowiedź w ogóle

g07kore

5

Problem polega na tym, #mapże elementy potomne bodymogą określać procentowe wysokości elementów potomnych tylko wtedy, gdy ich rodzic ma wyraźnie określoną wysokość.

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

Spowoduje to utworzenie pożądanego efektu, ale powierzchnia użytkowa nigdy nie wzrośnie powyżej 75% z 480 pikseli. Zwykle divzawija się, gdy nie ma treści, ale z Ulotką, nawet jeśli twoja mapa jest w środku, nie divjest obliczana przy renderowaniu, dlatego zwalnia podczas renderowania. Jeśli chcesz, aby treść zajmowała całą przestrzeń pionową, możesz zapytać o rozmiar okna przy ładowaniu strony za pomocą javascript i ustawić wysokość w ten sposób.

RomaH
źródło

3

Po prostu dodaj a height:100%do tagów htmli body, aby miały określoną wysokość i mogły być używane jako odniesienie i powinno działać.

<!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>

Bibliografia:

To pokrewne pytanie Stackoverflow: Procentowa wysokość HTML 5 / CSS
Możesz także zapoznać się ze standardem W3C CSS 2.1, aby zobaczyć model pudełkowy oraz część dotyczącą wysokości i marginesów obliczeniowych

pconcepcion
źródło

1

To jest odpowiednie rozwiązanie.

George Silva

1

Ostrzeżenie! Po przetestowaniu w różnych przeglądarkach dowiedziałem się, że moja odpowiedź poniżej działa tylko dla mnie w Chrome, a nie w Firefox

Miałem ten sam problem i naprawiłem to za pomocą display: table na głównym div i display table-cell na każdym div dzięki tej odpowiedzi na 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 -->

I css:

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

RvdBerg
źródło

Rozmiar ulotki Mapa wewnątrz paska startowego

Odpowiedzi:

Bibliografia: