Mappa fogli di dimensionamento all'interno del bootstrap

Question

Ho cercato di modificare l'altezza della mia mappa in una percentuale all'interno del bootstrap ma ogni volta che faccio la mappa non verrà disegnata. Quindi, devo sempre tornare al valore di px. Sono piuttosto sicuro che è un ambiente semplice che mi manca poiché sono un novizio CSS. Ecco il mio css.

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

Answer 1

Prova ad aggiungere una proprietà height a body o contenitore principale.

Answer 2

Oltre ad impostare la proprietà height del map div su 100%, potrebbe essere necessario implementare this per garantire che la mappa riempia il div su un ridimensionamento.

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

tuo html sarà

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

Answer 5

Con i CSS dal progetto Bootleaf su Github:

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