【问题标题】：Iframe creates extra space belowiframe 在下方创建额外空间
【发布时间】：2014-01-28 07:18:55
【问题描述】：

为什么 iframe 会在其元素下添加额外的空间？看看这个奇怪的行为：

.border {
    background: red;
    width: 300px;
    height: 200px;
    border: 1px solid green;
    overflow: visible;
    margin: 0;
    padding: 0;
}

.border iframe {
    border: none;
    width: 300px;
    height: 100px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
}

.border .lower {
    height: 100px;
    margin: 0;
    padding: 0;
    background: blue;
    opacity: 0.8;
}

<div class="border">
  <iframe src="https://example.com"></iframe>
  <div class="lower"></div>
</div>

如何解决？

【问题讨论】：

标签： html css iframe

【解决方案1】：

将display:block; 添加到您的 iframe 样式中，如下所示：

.border iframe {
    border: none;
    width: 300px;
    height: 100px;
    margin: 0;
    padding: 0;
    opacity: 0.8;
    display:block; /* Add this */
}

Iframe 是一个内联框架，这意味着它是一个内联元素，与 img 标签一样，可能会出现空格问题。在其上设置display:block; 会将Iframe 变为块元素（如div），这将消除空格问题。

【讨论】：

那是一个有趣的三个小时。
对于现在遇到这种情况的人来说，iFrame 必须具有固定宽度，width: 100% 无法缩小 iFrame 和 <body> 之间的差距。
@BrandonFranklin 有没有办法在保持动态 100% 宽度的同时解决这个问题？

【解决方案2】：

iframe 是一个内联元素。这会将 HTML 中的空格考虑在内。 display:inline-block 是出了名的难搞。

将 display:block; 添加到 iframe 的 CSS 中。

【讨论】：

【解决方案3】：

在我的情况下，iframe 正确位于一个块中，并且大小宽度和高度都是正确的。我将它应用到 我的 iframe 的容器 并且它起作用了：

.iframe-container{
line-height:0px;
}

【讨论】：

【解决方案4】：

最简单的方法是在 iframe 参数中添加“style="display:block"”。

例如

    <iframe width="100%" height="100%" frameborder="0" style="display:block" 
    src="https://www.url.com"></iframe>

【讨论】：

【解决方案5】：

iframe 元素是一个内联元素。解决间距问题的一种方法是添加display: block，但您也可以通过简单地将vertical-align: bottom; 添加到iframe 元素来解决它。

【讨论】：

【解决方案6】：

在为移动设备或桌面设计时，其他答案对我有用，但是当填充底部会根据屏幕大小而有所不同时，它就不起作用了。

有效的是使用Viewport Height。

我将这些添加到我的 CSS 中，它解决了所有分辨率的问题。

.resp-iframe 
{
    height: 100vh;
    min-height: 800px;
}

【讨论】：

【解决方案7】：

将框架放入 div 并使 div 与 iframe 的高度相同

像这样：

<div style="height: 370px;">
    <iframe height="370"></iframe>
</div>

【讨论】：

这实际上解决了我在 woocommerce/wordpress 中的 paypal 按钮 iframe 问题。谢谢！

【解决方案8】：

02 2022（引导程序 5.1）

我想我会通过使用 CSS 和 Bootstrap 5.1 来解决这个问题
我将以谷歌地图为例。

在 iFrame 上

CSS方法：可以在style属性中使用display:block

                                                                   ↓                             
                                                              -------------                      
<iframe src="SOURCE" width="600" height="450" style="border:0;display:block" allowfullscreen=""
loading="lazy"></iframe>

引导方法：使用d-block类

                                                                      ↓                             
                                                                ------------- 
<iframe src="SOURCE" width="600" height="450" style="border:0;" class="d-block" allowfullscreen=""
loading="lazy"></iframe>

在 iFrame 父级上

CSS 方法：如果您使用div 进行包装，您可以将line-height:0 用于您的父元素。

                 ↓
            -------------
<div style="line-height:0">
  <iframe src="SOURCE" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>

Boostrap 方法：说到 line-height，bootstrap 有四个 line-height 类lh-1、lh-sm、lh-base、lh-lg 它们对文本很有用，但不幸的是它们没有不适用于 iframe。此外，将 d-block 添加到父级也不起作用，您可以像 CSS 一样在 iframe 上使用 d-block。

<div>
                                                                             ↓
                                                                       -------------
    <iframe src="SOURCE_HERE" width="600" height="450" style="border:0;display:block" allowfullscreen="" 
loading="lazy"></iframe>
</div>

固定父级高度

如果您的父级高度是固定的，那么您可以将 iframe 设置为 height="100%"，这将扩展 iframe 高度以匹配您的父级

.parent{
    height: 500px;
}

<div class="parent">
                                                   ↓
                                                 ------
    <iframe src="SOURCE_HERE" width="600" height="100%" style="border:0" allowfullscreen="" loading="lazy"></iframe>
</div>

无法访问 iframe 元素

如果您无法控制 iframe 元素，则可以将父级高度设置为与 iframe 高度匹配。

.parent{
    height: 450px;
}

<div class="parent">
                                                   ↓
                                                 -----
    <iframe src="SOURCE_HERE" width="600" height="450" style="border:0;display:block" allowfullscreen="" loading="lazy"></iframe>
</div>

【讨论】：

【解决方案9】：

对我的应用有用的是将overflow-y: hidden; 添加到 iframe 的 html 中。

【讨论】：

【解决方案10】：

这是另一个答案，请检查它...

.border iframe {
border: none;
width: 300px;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
}

【讨论】：