11

Ho cercato di cambiare l'altezza della mia mappa volantino in una percentuale all'interno del bootstrap ma ogni volta che lo faccio la mappa non disegna. Pertanto, devo sempre ripristinare il valore px. Sono abbastanza sicuro che sia un'impostazione semplice che mi manca da quando sono un novizio CSS. Ecco il mio css.

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

web-mapping leaflet bootstrap-framework

— njackson.gis
fonte

3

fornisci maggiori informazioni: come appare il tuo markup? Puoi fornire un esempio minimo che mostri il problema?

— Atlefren,

12

Ho sempre avuto problemi con l'altezza della mappa nel bootstrap poiché il margine in alto può essere diverso quando la larghezza della mappa cambia per ottenere l'altezza del 100% (ma con una barra di navigazione in alto) finisco per usare

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

}

che è brutto ma fa il lavoro.

— Calvin
fonte

6

[AGGIORNAMENTO 2020]

A partire dal 2020/02/23 Flexbox ha il 95% di supporto browser ed è un'ottima opzione per rendere Leaflet reattivo usando la proprietà flex-grow.

Visualizza una demo di CodePen qui

È impostato in modo tale da renderlo ancora nei browser che non supportano Flexbox, ma solo quegli utenti dovranno scorrere abit

¯ \ _ (ツ) _ / ¯

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

[POST VECCHIO]

Questo ha funzionato per me.

Nota: volevo che la mia mappa non fosse larga al 100% su schermi di grandi dimensioni, quindi ho aggiunto

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

— Tristan Forward
fonte

1

ha funzionato per me. in realtà la migliore risposta a tutti

— g07kore

5

Il problema è #mapun figlio di bodye puoi specificare le altezze percentuali per gli elementi figlio solo se il suo genitore ha un'altezza definita in modo esplicito.

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

Ciò creerebbe ciò che desideri, ma l'area utilizzabile non diventerebbe mai più grande del 75% di 480 px. Normalmente un divcollasso quando non c'è un contenuto, ma con Leaflet, anche se la tua mappa è nel divnon è calcolata al rendering, quindi crolla al rendering. Se vuoi che il contenuto occupi tutto lo spazio verticale, puoi interrogare la dimensione della finestra al caricamento della pagina con un po 'di javascript e impostare l'altezza in questo modo.

— RomaH
fonte

3

Basta aggiungere height:100%a ai tag htmle in bodymodo che abbiano un'altezza definita e possano essere usati come riferimento e dovrebbe funzionare.

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

Riferimenti:

Questa domanda correlata di StackOverflow: Percentuale altezza HTML 5 / CSS
Puoi anche dare un'occhiata allo standard W3C CSS 2.1 per vedere il modello di scatola e la parte relativa al calcolo delle altezze e dei margini

— pconcepcion
fonte

1

questa è la strada da percorrere.

— George Silva,

1

Avvertimento! Dopo i test cross-browser ho scoperto che la mia risposta di seguito ha funzionato solo per me in Chrome e non in Firefox

Ho avuto lo stesso problema e risolto questo con display: table su un div principale e display table-cell su ogni div grazie a questa risposta su 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 -->

E il css:

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

— RvdBerg
fonte

Dimensionamento del foglio illustrativo all'interno del bagagliaio

Riferimenti: