expand height iframe dynamically

Question

expand height iframe dynamically

Navigation

#1 by (0 votes)

0

I have a layout of 2 columns: the first with a map and the second with info. I managed to get the iframe on the map to fit the width, but I do not know how to dynamically increase the height and that the map is the same height as the accompanying text.

Any ideas ???

MVCE : link

HTML (basic):

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

html css3 css google-maps iframe

asked by joc 06.07.2018 в 12:16

source

1 answer

ZEROFILL field in PHP Migrate multisite or multisite from wordpress to local under wampserver

score 0 · Answer 1

I think the problem is that the iframe's father does not have a defined stop:

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

So height:auto or height:100% actually do not do anything because the parent has a dynamic height defined by the child.

The problem spreads to the parent elements even if you put float:left to everything. Unless you determined in advance some arbitrary height with pixels, it would not work, and that height actually depends on the content of the second column, which is dynamic, so that idea does not work for you.

The solution that I would give you is to use flexbox (nowadays all browsers support it).

First, let's give a class to the father of the iframe who identifies him as such: (I put him iframe_container )

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

Your row element would have style

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

Your column element:

.column {
  flex:1;
}

The father of the iframe:

.column .iframe_container {
  height:100%;
}

And the iframe itself:

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

You may notice that instead of using attributes, I used CSS to give width and height to the iframe. It's cleaner I think.

I'm working on Plunk: link