如何在div中填充iframe?

时间:2017-08-11 11:29:58

标签: html css iframe height css-tables

我正在尝试在div[display=table-cell]中以100%的高度显示iframe,但代码不起作用。只有当我给父div提供固定高度时才能工作,但是联系表格的高度必须是动态的,并且#contact-map高度始终必须像#contact-form高度。我究竟做错了什么?如何在#contact-map内填写iframe?

textarea {
    max-width: 800px;
    max-height: 250px;
}
.contact {
    width: 100%;
    min-height: 543px;
    display: table;
}

#contact-map {
    height: 100%;
    display: table-cell;
}

#contact-form {
    background-color: blue;
    display: table-cell;
    width: 43%;
}
<div class="contact">
    <div id="contact-form">
        <p id="contact-street">text-text</p>
      <p id="contact-emailto">text-text</p>
      <p id="contact-telephone">123123</p>
      <textarea name="contact_message" id="contact_message"></textarea>
      </div>
    <div id="contact-map">
        <iframe src="http://google.com" width="100%" height="100%" frameborder="0" allowfullscreen=""></iframe>
    </div>
</div>

2 个答案:

答案 0 :(得分:0)

工作正常,请查看此示例

之所以发生这种情况是因为你只给了.contact类的最小高度

试着像这样给予身高

.contact {
    width: 100%;
    min-height: 543px;
    display: table;
    height: 100%;
}

希望这会对你有所帮助

&#13;
&#13;
textarea {
    max-width: 800px;
    max-height: 250px;
}
.contact {
    width: 100%;
    min-height: 543px;
    display: table;
    height: 100%;
}

#contact-map {
    height: 100%;
    display: table-cell;
}

#contact-form {
    background-color: blue;
    display: table-cell;
    width: 43%;
}
&#13;
<div class="contact">
    <div id="contact-form">
        <p id="contact-street">text-text</p>
      <p id="contact-emailto">text-text</p>
      <p id="contact-telephone">123123</p>
      <textarea name="contact_message" id="contact_message"></textarea>
      </div>
    <div id="contact-map">
        <iframe src="https://www.youtube.com/embed/A6XUVjK9W4o" width="100%" height="100%" frameborder="0" allowfullscreen=""></iframe>
    </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

将高度:100%应用于所有父项(如果需要,一直到html&amp; body)。

因为很难看出iframe的样子,我只是给了它一个红色的背景。

替代方案是使用Flexbox,但尚未在所有浏览器上正确支持。

&#13;
&#13;
html, body { height: 100%; }

textarea {
    max-width: 800px;
    max-height: 250px;
}
.contact {
    width: 100%;
    min-height: 543px;
    display: table;
    height:100%;
}


#contact-map {
    height: 100%;
    display: table-cell;
}

#contact-form {
    background-color: blue;
    display: table-cell;
    width: 43%;
    height:100%;
}

iframe
{
   background-color:red;
   height:100%;
}
&#13;
<div class="contact">
    <div id="contact-form">
        <p id="contact-street">text-text</p>
      <p id="contact-emailto">text-text</p>
      <p id="contact-telephone">123123</p>
      <textarea name="contact_message" id="contact_message"></textarea>
    </div>
    <div id="contact-map">
        <iframe style="background-color:red" frameborder="0" allowfullscreen=""></iframe>
    </div>
</div>
&#13;
&#13;
&#13;