div里面的iframe怎么填？

Question

我正在尝试在 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>

Answer 1

它运行良好，检查这个例子

发生这种情况是因为您只为 .contact 提供了最小高度 class

尽量给身高也这样

.contact {
    width: 100%;
    min-height: 543px;
    display: table;
    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%;
}

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

Answer 2

将 height : 100% 应用于所有父项（如果需要，一直到 html & body）。

因为很难看清 iframe 的样子，所以我只给它一个红色背景。

另一种方法是使用 Flexbox，目前还没有在所有浏览器上正确支持它。

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

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

div里面的iframe怎么填？

How fill iframe inside div?

html

css

iframe

height

css-tables