Mapas de Google de ancho de fluido

Tengo un diseño de 2 columnas para el sitio web, con la columna de ancho fijo izquierdo y un mapa de Google de ancho de fluido derecho que ocupa el resto del ancho no tomado por la columna de la izquierda.Mapas de Google de ancho de fluido

Problema: Sin embargo, parece que no puedo obtener los mapas de Google <div id="map_canvas"> para que sean fluidos y ocupen el resto del ancho. ¿Lo configuré incorrectamente? ¡Gracias!

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

Fuente

2012-01-07 Nyxynyx

Aquí está la solución [Establecer el ancho y alto de DIV del contenedor de Google Maps 100%] (http://stackoverflow.com/a/18147172/782535) –

Si intenta utilizar style="width:100%;height:100%" en su mapa div, como lo ha hecho dando la altura del 100%, se obtiene un div mapa que tiene altura cero Esto se debe a que el div intenta ser un porcentaje del tamaño del <body>, pero de forma predeterminada tiene una altura indeterminada.

Hay formas de determinar la altura de la pantalla y usar ese número de píxeles como la altura del div del mapa, pero una alternativa simple es cambiar el <body> para que su altura sea del 100% de la página. Podemos hacer esto aplicando style="height:100%" tanto al <body> como al <html>. (Tenemos que hacerlo a ambos, de lo contrario, el <body> intenta ser el 100% del alto del documento, y el valor predeterminado para eso es una altura indeterminada.)

El reajuste de los valores de su CSS debería resolver su problema.

Fuente

2012-01-07 12:44:08 defau1t

Gracias defau1t, muy útil, solucionó mi problema también. gracias – CodeGuru

@RainbowHat; contento de que podría ser útil – defau1t

Respuesta

Cuestiones relacionadas