Question

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

Answer 1

您可以混合使用flex和绝对定位：

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

Answer 2

这可以使用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%;
}

动态应用iframe高度

2 个答案: