如何在div中填充iframe？

Question

我试图在div[display=table-cell]中显示100％高度的iframe，但代码不起作用。只有当我给予父div的固定高度时，该工作才有效，但是contact-form的高度必须是动态的，并且始终为#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

适用高度：100％所有的父项（如果需要的话最多到html &身体一路）。

因为很难看出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>

Answer 2

这是工作好，看看这个例子

它发生，因为你只给了最小高度。接触类

试举高度也这样

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

Hope这将帮助您

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>