11

Ich habe versucht, die Höhe meiner Faltblattkarte innerhalb des Bootstraps auf einen Prozentsatz zu ändern, aber jedes Mal, wenn ich dies tue, wird die Karte nicht gezeichnet. Daher muss ich immer zum px-Wert zurückkehren. Ich bin mir ziemlich sicher, dass es eine einfache Einstellung ist, die mir fehlt, da ich ein CSS-Neuling bin. Hier ist meine CSS.

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

web-mapping leaflet bootstrap-framework njackson.gis
quelle

3

Bitte geben Sie weitere Informationen an: Wie sieht Ihr Markup aus? Können Sie ein minimales Beispiel für das Problem erstellen?

Atlefren

12

Ich hatte schon immer Probleme mit der Kartenhöhe im Bootstrap, da der Rand oben unterschiedlich sein kann, wenn sich die Breite der Karte ändert, um eine Höhe von 100% zu erhalten (aber mit einer Navigationsleiste oben), die ich am Ende verwende

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

}

Das ist hässlich, erledigt aber die Arbeit.

Calvin
quelle

6

[UPDATE 2020]

Ab 2020/02/23 bietet Flexbox 95% Browserunterstützung und ist eine großartige Option, um Leaflet mithilfe der Flex-Grow-Eigenschaft reaktionsfähig zu machen.

Sehen Sie sich hier eine CodePen-Demo an

Es ist so eingerichtet, dass es weiterhin in Browsern gerendert wird, die Flexbox nicht unterstützen. Nur diese Benutzer müssen abit scrollen

¯ \ _ (ツ) _ / ¯

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

[ALTER POST]

Das hat bei mir funktioniert.

Hinweis: Ich wollte, dass meine Karte auf großen Bildschirmen nicht 100% breit ist, also habe ich hinzugefügt

.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 vorwärts
quelle

1

arbeitete für mich. eigentlich die beste Antwort überhaupt

g07kore

5

Das Problem ist #mapein untergeordnetes bodyElement von und Sie können prozentuale Höhen für untergeordnete Elemente nur angeben, wenn das übergeordnete Element eine explizit definierte Höhe hat.

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

Dies würde schaffen, was Sie wünschen, aber die nutzbare Fläche würde niemals größer als 75% von 480px werden. Normalerweise wird ein divzusammengeklappt, wenn kein Inhalt vorhanden ist, aber mit Leaflet, obwohl sich Ihre Karte im divbefindet, wird sie beim Rendern nicht berechnet, daher beim Rendern zusammenbrechen. Wenn der Inhalt den gesamten vertikalen Raum einnehmen soll, können Sie die Fenstergröße beim Laden der Seite mit etwas Javascript abfragen und die Höhe auf diese Weise festlegen.

RomaH
quelle

3

Fügen Sie einfach ein height:100%zu den Tags htmlund hinzu, bodydamit sie eine definierte Höhe haben und als Referenz verwendet werden können und es funktionieren sollte.

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

Verweise:

Diese verwandte Frage von Stackoverflow: Prozenthöhe HTML 5 / CSS
Sie können auch einen Blick auf den W3C CSS 2.1-Standard werfen, um das Box-Modell und den Teil über die Berechnung von Höhen und Rändern zu sehen

pconcepcion
quelle

1

Das ist der richtige Weg.

George Silva

1

Warnung! Nach Cross-Browser-Tests stellte ich fest, dass meine Antwort unten nur für mich in Chrome und nicht in Firefox funktioniert

Ich hatte das gleiche Problem und habe dies mit display: table auf einem Hauptdiv und display table-cell auf jedem div behoben, dank dieser Antwort auf 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 -->

Und die CSS:

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

RvdBerg
quelle

Dimensionierung der Merkblattkarte im Bootstrap

Antworten:

Verweise: