logo标签列表

Iframe在下方创建了额外的空间

htmlcssiframe
63
为什么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>

如何解决？

13个回答
145

将display:block;添加到您的Iframe样式中，就像这样：

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

Iframe是内联框架的缩写，也就是说它是一个内联元素，和图片标签一样，可能会有空格问题。将display:block;设置在它上面会将Iframe转换为块级元素（例如div），这样就可以解决空格问题。

25
那是三个有趣的小时。 - detly
1
对于现在刚看到这篇文章的人来说，iFrame必须有一个固定的宽度，width: 100%无法关闭iFrame和<body>之间的间隙。 - Brandon Franklin
@BrandonFranklin，有没有一种方法可以在保持动态100％宽度的同时修复这个问题？ - bd33
10

iframe 是内联元素。它会考虑 HTML 中的空格。而 display:inline-block 以难以处理著称。

请在您的 iframe 的 CSS 中添加 display:block;。

6

iframe元素是行内元素。修复间距问题的一种方法是添加display: block，但是您也可以通过向iframe元素添加vertical-align: bottom;来修复它。

4

在我的情况下，iframe 正确地位于块中，宽度和高度都是正确的。 我将此应用于 我的 iframe 容器，它起作用了：

.iframe-container{
line-height:0px;
}
2
最简单的方法是在iframe参数中添加“style =“ display：block””。例如：
    <iframe width="100%" height="100%" frameborder="0" style="display:block" 
    src="https://www.url.com"></iframe>
1

将<iframe>放置在一个带有display: flex属性的容器中，并使用border: 0从<iframe>中移除边框，似乎也可以起到作用：

/* doesn't work */
.container {
  border: 1px solid black;
  height: 100%;
}

.container iframe {
  height: 100%;
}

/* works */
.container-flex {
  margin-top: 50px;
  display: flex;
  border: 1px solid black;
}

.container-flex iframe {
  border: 0;
}
<div class="container">
  <iframe src="https://www.youtube.com/embed/7X8II6J-6mU"></iframe>
</div>

<div class="container-flex">
  <iframe src="https://www.youtube.com/embed/7X8II6J-6mU"></iframe>
</div>

1
我在 WordPress 站点上遇到了同样的问题，但以上提供的解决方案都不起作用。当我使用 Chrome 开发者工具检查 iframe 时，发现它被包含在一个段落（p）中。我将其删除后，问题得到了解决。
因此，如果您要在 WordPress 网站中嵌入 Google 地图，请不要忘记 WP 会自动添加段落。
0

02 2022（Bootstrap 5.1）

我想通过使用CSS和Bootstrap 5.1来回答这个问题，以Google地图为例。

iFrame上的方法

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

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

Bootstrap方法：使用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>

引导法：说到行高，Bootstrap 有四个行高类 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>
0
请在.boder样式中添加display: flex;和flex-direction: column;。
因此，样式将如下所示： 

.border {
  background: #e30606;
  width: 300px;
  height: 200px;
  border: 1px solid green;
  overflow: visible;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

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

0

其他答案对我在设计仅适用于移动设备或仅适用于桌面时有效，但当底部填充基于屏幕大小不同时，它无效。

有效的方法是使用视口高度。

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

.resp-iframe 
{
    height: 100vh;
    min-height: 800px;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接