如何在 div 中填充 iframe？

Posted 2023-03-06

【中文标题】如何在 div 中填充 iframe？

【英文标题】：How fill iframe inside div?

【发布时间】：2018-01-19 21:48:37

【问题描述】：

我正在尝试以 100% 的高度在 div[display=table-cell] 中显示 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"   frameborder="0" allowfullscreen=""></iframe>
    </div>
</div>

【参考方案1】：

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

【参考方案2】：

效果不错，看看这个例子

这是因为你只给了 .contact 类的 min-height

试着给高度也这样

.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"   frameborder="0" allowfullscreen=""></iframe>
    </div>
</div>

【讨论】：

为什么里面有 youtube 视频？

@TimothyGroote 当您尝试添加 https://www.google.com 时，它会触发此错误 Refused to display 'https://www.google.com' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

youtube 视频也是如此；)

是的，它会将 youtube 视频播放器放在 iframe 中（然后由于跨源请求而失败。没关系），但它不会随着其他表格单元格。

可能因为语言不通，我无法解释我无法理解的东西。我会在原版上展示。检查dropmefiles.com/FsLWO