Html iframe 在下方创建额外空间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21025319/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Iframe creates extra space below
提问by katspaugh
Why does an iframe add extra space under its element? Look at this weird behavior:
为什么 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>
How to work around?
如何解决？
回答by wickywills
Add display:block;to your Iframe style like so:
添加display:block;到您的 iframe 样式，如下所示：
.border iframe {
border: none;
width: 300px;
height: 100px;
margin: 0;
padding: 0;
opacity: 0.8;
display:block; /* Add this */
}
Iframe is an Inline Frame, meaning that it is an inline element, which like the img tag, can have issues with whitespace. Setting display:block;on it turns the Iframe into a block element (like a div), which will remove the whitespace issue.
iframe 是一个内联框架，这意味着它是一个内联元素，与 img 标签一样，可能存在空白问题。设置display:block;它会将 Iframe 转换为块元素（如 div），这将消除空白问题。
回答by tomsullivan1989
iframeis an inline element. This takes whitespace in your HTML into account. display:inline-blockis notorious for being difficult.
iframe是一个内联元素。这会将 HTML 中的空格考虑在内。display:inline-block以困难而臭名昭著。
Add display:block;to the CSS for your iframe.
添加display:block;到您的 iframe 的 CSS。
回答by KelzoJP
In my case the iframe was correctly in a block and size width and height were both corrects. I applied this to the container of my iframeand it worked :
在我的情况下，iframe 正确地位于一个块中，并且大小宽度和高度都是正确的。我将它应用到iframe的容器中，它起作用了：
.iframe-container{
line-height:0px;
}
回答by TeeJay DeMaria
The easiest way to do this is to just add "style="display:block"" in the iframe params.
最简单的方法是在 iframe 参数中添加“style="display:block"”。
for example
例如
<iframe width="100%" height="100%" frameborder="0" style="display:block"
src="https://www.url.com"></iframe>
回答by bd33
The other answers worked for me when designing for just mobile or just desktop, but when the padding-bottom would have been different based on the size of the screen, it did not work.
在仅针对移动设备或仅针对桌面设备进行设计时，其他答案对我有用，但是当填充底部因屏幕大小而异时，它不起作用。
What does work is using Viewport Height.
有效的是使用Viewport Height。
I added these to my CSS and it resolved the issue in all resolutions.
我将这些添加到我的 CSS 中，它解决了所有分辨率的问题。
.resp-iframe
{
height: 100vh;
min-height: 800px;
}
回答by hs777it
Put the frame in div and make div same height of an iframe
将框架放在 div 中并使 div 与 iframe 高度相同
like this:
像这样：
<div style="height: 370px;">
<iframe height="370"></iframe>
</div>
回答by jarodtaylor
The iframeelement is an inline element. One way of fixing the spacing issue is adding display: block, but you can also fix it by simply adding vertical-align: bottom;to the iframeelement.
该iframe元素是一个内联元素。解决间距问题的一种方法是添加display: block，但您也可以通过简单地添加vertical-align: bottom;到iframe元素来解决它。
回答by thouliha
What worked for my app, was adding overflow-y: hidden;to the html of the iframe.
对我的应用程序有用的是添加overflow-y: hidden;到 iframe 的 html。
回答by HD..
here is another answer please check it ...
这是另一个答案，请检查...
.border iframe {
border: none;
width: 300px;
height: 100%;
margin: 0;
padding: 0;
opacity: 0.8;
}
