0

Tengo un layout de 2 columnas: la primera con un mapa y la segunda con info. He conseguido que el iframe del mapa se ajuste al ancho, pero no se como hacer para ampliar la altura dinamicamente y que el mapa sea de la misma altura que el texto que lo acompaña.

Alguna idea???

MVCE: https://jsfiddle.net/w5h49j1f/

HTML (basico):

<div class="row">
  <div class="column">
    <iframe  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2516.555272130855!2d4.339358315458401!3d50.894940979539264!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c3c3ac00000001%3A0x5293071d68a63709!2sAtomium!5e0!3m2!1sca!2ses!4v1530871671353"
        width="95%" height="auto"  // he probado poner px o porcentaje 
    </iframe>
  </div>

  <div class="column">
    <div> informacion del lugar </div>
  </div>
</div>

CSS:

.column {
  float: left;
  width: 50%;
}

/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}
3
  • Agrega un Script que Coja del Alto del BODY y se lo Insertas al IFRAME por javascript, perdona que no te ponga código ya que debes adaptar-lo a tus necesidades, pero es una buena solución a tu problema, a mi me paso ya en un proyecto y lo resolví agregando-le un SCRIPT con las relaciones oportunas ( Cogiendo el alto del BODY y Agregandose-lo al IFRAME Mediante Código )... Commented el 6 jul. 2018 a las 10:33
  • el problema es que si le pongo los pixels manualmente en el iframe no me amplia el mapa.... deberia hacerlo por css en vez de aplicar la altura directamente al html?
    – joc
    Commented el 6 jul. 2018 a las 10:45
  • Haz un Porcentaje con los Pixeles... Commented el 6 jul. 2018 a las 20:35

1 respuesta 1

1

Pienso que el problema está en que el padre del iframe no tiene un alto definido:

<div class="_4-u3 _5dwa _5dwb _3v6c" style="text-align: left;">
  <iframe src="url_de_google"
    width="95%" height="auto" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

De manera que height:auto o height:100% en realidad no hacen nada porque el padre tiene una altura dinámica definida por el hijo.

El problema se propaga a los elementos padres aunque le pongas float:left a todo. A menos que determinaras de antemano alguna altura arbitraria con pixeles, no funcionaría, y esa altura en realidad depende del contenido de la segunda columna, que es dinámico, por lo que esa idea no te sirve.

La solución que yo te daría es usar flexbox (hoy en día todos los navegadores lo soportan).

Primero, démosle una clase al padre del iframe que lo identifique como tal: (le puse iframe_container)

<div class="_4-u3 _5dwa _5dwb _3v6c iframe_container"  style="text-align: left;">
  <iframe src="...url mapa..."
    allowfullscreen></iframe>
</div>

Tu elemento row tendría estilo

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: stretch;
    align-items: stretch;
}

Tu elemento column:

.column {
  flex:1;
}

El padre del iframe:

.column .iframe_container {
  height:100%;
}

Y el iframe mismo:

.column iframe {
  flex:1 1 auto;
  width:95%;
  height:100%;
  border:0 none;
}

Podrás notar que en vez de usar atributos, usé CSS para darle ancho y alto al iframe. Es más limpio creo yo.

Velo funcionando en Plunk: https://plnkr.co/edit/YkeuJp2dA0mESrphsVkm?p=preview

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.