iframe 在下方创建额外空间
Posted
技术标签:
【中文标题】iframe 在下方创建额外空间【英文标题】：Iframe creates extra space below 【发布时间】：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>如何解决？
【问题讨论】：
【参考方案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 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 ></iframe>
</div>
【讨论】：
这实际上解决了我在 woocommerce/wordpress 中的 paypal 按钮 iframe 问题。谢谢！【参考方案8】：02 2022（引导程序 5.1）
我想我会通过使用 CSS 和 Bootstrap 5.1 来解决这个问题 我将以谷歌地图为例。
在 iFrame 上
CSS方法：可以在style属性中使用display:block
↓
-------------
<iframe src="SOURCE" style="border:0;display:block" allowfullscreen=""
loading="lazy"></iframe>
引导方法：使用d-block类
↓
-------------
<iframe src="SOURCE" style="border:0;" class="d-block" allowfullscreen=""
loading="lazy"></iframe>
在 iFrame 父级上
CSS 方法：如果您使用div 进行包装，您可以将line-height:0 用于您的父元素。
↓
-------------
<div style="line-height:0">
<iframe src="SOURCE" 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" style="border:0;display:block" allowfullscreen=""
loading="lazy"></iframe>
</div>
固定父级高度
如果您的父级高度是固定的，那么您可以将 iframe 设置为 height="100%"，这将扩展 iframe 高度以匹配您的父级
.parent
height: 500px;
<div class="parent">
↓
------
<iframe src="SOURCE_HERE" style="border:0" allowfullscreen="" loading="lazy"></iframe>
</div>
无法访问 iframe 元素
如果您无法控制 iframe 元素，则可以将父级高度设置为与 iframe 高度匹配。
.parent
height: 450px;
<div class="parent">
↓
-----
<iframe src="SOURCE_HERE" 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;
【讨论】：
以上是关于iframe 在下方创建额外空间的主要内容，如果未能解决你的问题，请参考以下文章