如何在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>