Google Maps a larghezza di fluido

Ho un layout a 2 colonne per il sito Web, con la colonna a larghezza fissa sinistra e una Google maps a larghezza fluida che riempie il resto della larghezza non occupata dalla colonna sinistra.Google Maps a larghezza di fluido

Problema: Tuttavia, non riesco a ottenere le mappe di Google <div id="map_canvas"> per essere fluide e occupare il resto della larghezza. L'ho impostato erroneamente? Grazie!

HTML

<div id="main_container"> 
    <div id="sidebar"></div> 
    <div id="map_container"> 
      <div id="map_canvas"></div> 
    </div> 
</div>

CSS

#main_container { 
    width: 100%; 
    height: 500px; 
    float: left; 
    clear: both; 
    position: relative; 
    z-index: 1; 
} 

#map_container { 
    height: 100%; 
    float: left; 
    position: relative; 
} 

#sidebar { 
    width: 270px; 
    float: left; 
} 

#map_canvas { 
    height: 100%; 
    min-width: 100px; 
    float: left; 
    display: block; 
    position: absolute; 
    z-order: 1000; 
}

fonte

2012-01-07 Nyxynyx

Ecco la correzione [Imposta larghezza e altezza del contenitore di Google Maps DIV al 100%] (http://stackoverflow.com/a/18147172/782535) –

Se si tenta di utilizzare style="width:100%;height:100%" sulla mappa div, come avete fatto dando altezza 100%, si ottiene una mappa div che ha altezza zero. Questo perché il div cerca di essere una percentuale della dimensione dello <body>, ma per impostazione predefinita ha un'altezza indeterminata.

Ci sono modi per determinare l'altezza dello schermo e utilizzare quel numero di pixel come l'altezza della mappa div, ma una semplice alternativa è quella di cambiare il <body> in modo che la sua altezza sia al 100% della pagina. Possiamo farlo applicando style="height:100%" allo <body> e allo <html>. (Dobbiamo farlo per entrambi, altrimenti lo <body> prova ad essere il 100% dell'altezza del documento, e il valore predefinito per questo è un'altezza indeterminata.)

Regolare nuovamente i valori CSS per risolvere il problema.

fonte

2012-01-07 12:44:08 defau1t

Grazie, defau1t, molto utile, risolto anche il mio problema. grazie – CodeGuru

@RainbowHat; felice di poter essere d'aiuto – defau1t

Google Maps a larghezza di fluido

risposta

Problemi correlati