动态应用 iframe 高度答案

【问题标题】：apply iframe height dynamically动态应用 iframe 高度
【发布时间】：2018-12-14 22:27:48
【问题描述】：

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

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

有什么想法吗？

MVCE：Fiddle

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

【问题讨论】：

标签： html css google-maps iframe

【解决方案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%;
}

【讨论】：

不完全是我需要的......它使列固定高度不是动态的。,,
不，它不是一个固定的高度，它会动态地获取具有更高高度的内容的高度。在同一个 Fiddle 中，您可以删除或增加右侧列的内容，以查看地图列的高度相应变化。 jsfiddle.net/w5h49j1f/35
也许是什么？对不起我的英语：D ...但至少是我的测试显示......在这里查看jsfiddle.net/w5h49j1f/28也许我错过了一些东西......
我只添加了所需的属性——高度和弹性属性。在您的上一篇文章中，宽度已经是 50%，这是正确的，所以我尝试更改它。在您现在在上面发布的小提琴中，它丢失了，我再次添加了它。这应该工作/。 jsfiddle.net/w5h49j1f/39
是的，我的错，但我仍然有与其他答案相同的问题......@media property stop workig..... :(

【解决方案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>

【讨论】：

接近我需要的，但它不允许@media 注释工作....在这里查看jsfiddle.net/w5h49j1f/26
是的，这确实应该是一个新问题，因为您在上述问题中没有提到媒体查询，这回答了发布的问题，但是你去吧，因为我很友善，你没有增加正确事物的宽度：jsfiddle.net/bu2aw4e0/2
其实你是对的，但我没想到@media注释会影响到这一点，这就是为什么我没有在MVCE中发布它（以及许多其他东西），很难说当我不是 CSS 专家时，限制在哪里