动态应用 iframe 高度

Question

>我有一个 2 列布局，第一个是地图(在 iframe 内(，第二个是地点的信息。

Iframe witdh 工作正常，但我无法动态应用高度以与第二列文本相同。

有什么想法吗？

MVCE：小提琴

.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

<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"></iframe>
<!--  // tried with px or percentage -->
</iframe>
</div>
<div class="column">
<div> place information </div>
<div> place information </div>
<div> place information </div>
<div> place information </div>
<div> place information </div>
<div> place information </div>
</div>
</div>

Answer 1

这可以使用 flex 属性来实现。 https://jsfiddle.net/w5h49j1f/18/

.row { display: flex; }
.row > .column:first-child > div + div{ 
height: calc(100% - 20px); /* for full height - subtracting the line-height of the title at the top in the 1st column  */
}
.row > .column iframe{
height: 100%;
}

Answer 2

你可以混合使用弹性和绝对定位：

.row {
display: flex;
flex-direction: row;  /* this makes columns equal height */
}
.column {
width: 50%;
}
.left-column {
display: flex;
flex-direction: column;   /* this allows the iframe holder to fill the rest of the column */
}
.iframe-holder {
width: 100%;
flex-grow: 1;             /* for growing the div to fill rest of space */
position: relative;
}
.iframe-holder iframe {
position: absolute;       /* make iframe fill div */
top: 0;
bottom: 0;
left: 0;
right: 0;
width:100%;                /* overwrite inline attributes */
height:100%;
}

<div class="row">
<div class="column left-column">
<div class="_4-u3 _5dwa _5dwb _3v6c" style="text-align: left;"><strong><span class="_38my">ON SOM:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c iframe-holder" style="text-align: left;">
<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" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
<div class="column">
<div class="_4-u3 _5dwa _5dwb _3v6c" style="text-align: left;">
Addresss
</div>
<div class="_5aj7 _3-8j _20ud" style="text-align: left;">
<div class="_4bl9">
<div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">Contact</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c">
98798798798798798798
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">Time:</span></strong></div>
987987987987987987987987987
</div>
</div>
</div>
</div>
<div id="u_fetchstream_1_u" class="_5aj7 _3-8j">
<div class="_4bl7" style="text-align: left;">
<div class="_2iem">
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
<div class="_4-u3 _5dwa _5dwb _3v6c"><strong><span class="_38my">more and more info:</span></strong></div>
</div>
</div>
</div>
</div>
</div>