Sizing Leaflet Map inside bootstrap

Question

Próbowałem zmienić wysokość mojej mapy ulotek na procent wewnątrz bootstrapu, ale za każdym razem, gdy robię mapę, nie rysuję. Dlatego zawsze muszę powrócić do wartości px. Jestem pewien, że jest to proste ustawienie, którego mi brakuje, odkąd jestem nowicjuszem CSS. Oto moje css.

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

Answer 1

spróbuj dodać właściwość height do body lub kontenera nadrzędnego.

Answer 2

Oprócz ustawienia właściwości wysokości mapy div na 100%, konieczne może być wdrożenie this, aby mapa wypełniła element div przy zmianie rozmiaru.

Answer 3

CCS

#map 
{ 
    width: 100px; 
    height:100px; 
    min-height: 100%; 
    min-width: 100%; 
    display: block; 
} 

html, body 
{ 
    height: 100%; 
} 

.fill 
{ 
    min-height: 100%; 
    height: 100%; 
    width: 100%; 
    min-width: 100%; 
} 

html

<div class="container fill"> 
    <div id="map"> 

    </div> 
</div> 

Answer 4

body { 
    padding: 0; 
    margin: 0; 
} 
html, body, #map, .row-fluid{ 
    height: 100%; 
} 

#map { 
    width: 100%; 
} 

.height-css 
{ 
    height: 100%; 
} 

Twój html będzie

<div class="container-fluid"> 
    <div class="row-fluid"> 
    <div class="span12 height-css"> 
     <div id="map"></div> 
    </div> 
    </div> 
</div> 

Answer 5

z CSS z projektem Bootleaf na Github:

html,body, #map{ 
    height:100%; 
    width: 100%; 
overflow: hidden; 
} 
body { 
    padding-top: 50px;