iFrame 100% 高度导致垂直滚动条答案

【问题标题】：iFrame 100% height causes vertical scrollbariFrame 100% 高度导致垂直滚动条
【发布时间】：2012-02-26 02:27:16
【问题描述】：

我看到很多关于 100% 高度 iFrame 的问题，但似乎没有人遇到与我完全相同的问题。

我想做的是有一个覆盖整个视口的iFrame，没有滚动条，没有设置overflow: hidden on body。

我的 iFrame 底部边距为 5px，不会随 css 消失，它会导致垂直滚动条。标准的建议似乎是设置溢出：隐藏在身上，但这并不能真正解决问题，对我来说还不够。

这是一个超级简单的jsFiddle example。（注意双垂直滚动条）

对我来说，这种行为在 Chrome 15、IE9 和 FF9 中是相同的。

【问题讨论】：

我在 2019 年遇到了同样的问题，并且 display: block 解决了这个问题，与下面的图像不需要的空白相同。

标签： html css iframe

【解决方案1】：

更新：

chrome 16.0.*、firefox 10.* 中的工作示例（显然 ie9 会以任何一种方式运行并显示滚动条 - 如果高度设置为 99%，则为禁用的滚动条，如果高度设置为无法滚动的活动滚动条100%）：

将以下内容放在一个html文件中并打开（不知道jsfiddle在做什么不同，但它的工作方式不一样）

<style>
* {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /*overflow: auto;*/ /* not needed, this is the default value*/
}
</style>
<iframe src="http://www.bbc.co.uk" frameborder="0"/>

【讨论】：

谢谢，但这并不是我真正想要的。也许我的问题并不清楚。我希望 iFrame 占据整个视口高度（和宽度，但这很容易）。您的解决方案没有这样做。我会继续编辑我的问题，以免其他人也有错误的想法。

【解决方案2】：

在 jsFiddle 外部看不到垂直滚动条：

<html>
<head>
<style>
body {
    padding: 0;
    margin: 0;
}

iframe {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    overflow: auto;
}
</style>
</head>
<body>
    <iframe src="http://www.bbc.co.uk" frameborder="0"/>
</body>
</html>

编辑：这是 Elements 选项卡下的 sn-p，当我检查 Chrome 中的空白区域时选择的内容。

【讨论】：

是的，很抱歉不够清楚。请参阅我的其他评论和我对问题的更改。
Ermm :-)，我不确定为什么这不符合要求。我调整了答案以设置宽度并包含iframe 的来源。 iframe 本身填充了整个视口，并且在包含的文档上没有设置 overflow 样式。
我认为您看到的5px 差距属于iframe 中包含的文档。我可以确认这一点，如果您右键单击 Chrome 中的空白并选择 Inspect Element，您可以自己查看。
好的，你用的是什么浏览器？因为如果不将 body 的高度设置为 100%，您将无法使用该 iFrame 填充视口。事实上，当我在三个不同的浏览器中尝试你的代码时，我得到了一个 iFrame 的预期结果，它在文档顶部是 100% 宽度和 150px 高度。
不，即使我没有为 iFrame 设置源，差距仍然存在。你看到例子了吗？你有同样的经历吗？

【解决方案3】：

产生滚动条的不是 iframe，而是它后面的空白

    <iframe src="http://www.bbc.co.uk" frameborder="0"></iframe>
    <!-- Whitespace here; This is being rendered! -->
</body>

如果你不想看到它，请使用

* { line-height: 0; }

edit：如果删除空格，问题仍然存在，但解决方案是相同的。默认情况下，iframe 呈现为内联元素（iframe = 'inline frame'），因此具有导致问题的行高。

或者，您可能想尝试iframe { display: block; } 或两种解决方案的组合。

【讨论】：

在 Chrome 中，当我右键单击空白区域并选择 Inspect Element 时，IFRAME 内的 HTML 元素在 Elements 下被选中 标签。我在答案中添加了屏幕截图。
@davegrove 不确定检查员是否 100% 准确。
在其他两种浏览器（Firefox 和 IE）中尝试过并检查突出显示相同的元素。试一试，它对你有什么亮点？
谢谢，这是正确答案。我真的以为我试过了，但我想我没有。
谢谢 :) display: block对我来说已经足够了。

【解决方案4】：

总结一下：

之前的空白会导致 iframe 右侧出现 4px 空白。
csuses 后的空白是 iframe 后的 4px 空白。

这是由于第一篇文章中指出的 iframe 的内联字符。

【讨论】：

【解决方案5】：

要防止滚动条试试这个：

CSS：

html, body  { height:100%; margin:0;}
.bdr    { border: thick solid grey }
.h100   { height:100%;}
.w100   { Width: 100% }
.bbox   { box-sizing: border-box;
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
        }
.vat    { font-size: 0; vertical-align:top}

HTML：

    <body class="bbox"><!-- no WS here--><iframe    
          class="bdr h100 w100 vat bbox" name="iframe1"
          src="http://www.bbc.co.uk"> </iframe><!--no WS here either--></body>

.bbox 样式可防止子 div 增长。 .Vat 对于 IE 和 Firefox 是必需的。 .vat 的替代方法是：display:block。要么显示：内联块 + 垂直对齐：顶部 .brd 用于演示目的。

【讨论】：