11

J'ai essayé de changer la hauteur de ma carte de dépliant en un pourcentage à l'intérieur du bootstrap mais à chaque fois que je fais la carte ne dessine pas. Ainsi, je dois toujours revenir à la valeur px. Je suis sûr que c'est un paramètre simple qui me manque depuis que je suis un novice CSS. Voici mon css.

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

web-mapping leaflet bootstrap-framework

— njackson.gis
source

3

veuillez fournir plus d'informations: à quoi ressemble votre balisage? Pouvez-vous produire un exemple minimal montrant le problème?

— atlefren

12

J'ai toujours eu des problèmes avec la hauteur de la carte dans le bootstrap car la marge en haut peut être différente lorsque la largeur de la carte change pour obtenir 100% de hauteur (mais avec une barre de navigation en haut) je finis par utiliser

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

}

ce qui est moche mais fait le travail.

— Calvin
source

6

[MISE À JOUR 2020]

Depuis le 23/02/2020, Flexbox prend en charge 95% des navigateurs et est une excellente option pour rendre Leaflet réactif à l'aide de la propriété flex-grow.

Voir une démo CodePen ici

Il est configuré de manière à ce qu'il s'affiche toujours sur les navigateurs qui ne prennent pas en charge Flexbox, seuls les utilisateurs devront faire défiler abit

¯ \ _ (ツ) _ / ¯

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

[ANCIEN POST]

Cela a fonctionné pour moi.

Remarque: je voulais que ma carte ne soit pas à 100% sur de grands écrans, j'ai donc ajouté

.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
source

1

travaillé pour moi. en fait la meilleure réponse du tout

— g07kore

5

Le problème est #mapun enfant de bodyet vous ne pouvez spécifier des hauteurs en pourcentage pour les éléments enfants que si son parent a une hauteur explicitement définie.

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

Cela créerait ce que vous désirez, mais la surface utilisable ne grossirait jamais plus de 75% de 480px. Normalement, un diveffondrement lorsqu'il n'y a pas de contenu, mais avec Leaflet, même si votre carte est dans le divil n'est pas calculé au rendu, donc réduit au rendu. Si vous voulez que le contenu occupe tout l'espace vertical, vous pouvez interroger la taille de la fenêtre au chargement de la page avec du javascript et définir la hauteur de cette façon.

— RomaH
source

3

Ajoutez simplement un height:100%aux balises htmlet bodyafin qu'ils aient une hauteur définie et puissent être utilisés comme référence et cela devrait fonctionner.

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

Références:

Cette question connexe de Stackoverflow: hauteur en pourcentage HTML 5 / CSS
Vous pouvez également jeter un œil à la norme W3C CSS 2.1 pour voir le modèle de boîte et la partie sur le calcul des hauteurs et des marges

— pconcepcion
source

1

c'est la voie à suivre.

— George Silva

1

Attention! Après des tests croisés, j'ai découvert que ma réponse ci-dessous ne fonctionnait que pour moi dans Chrome et non dans Firefox

J'ai eu le même problème et corrigé cela avec display: table sur un div principal et afficher la cellule du tableau sur chaque div grâce à cette réponse sur 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 -->

Et le css:

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

— RvdBerg
source

Carte de dimensionnement à l'intérieur du bootstrap

Références: