Question

我看到很多关于100％高度iFrame的问题，但似乎没有人像我一样有问题。

我想要的是拥有一个覆盖整个视口的iFrame，没有滚动条，没有设置溢出：隐藏在正文上。

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

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

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

Answer 1

产生滚动条的不是iframe，而是

之后的空白

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

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

* { line-height: 0; }

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

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

Answer 2

更新

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"/>

Answer 3

没有看到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>

编辑：以下是我在检查Chrome中的空白区域时所选内容的元素标签下的片段。

Developer Tools Snip

Answer 4

总结一下：

之前的空格会导致iframe严格的4px空格。
在iframe之后的csuses 4px空格后的空格。

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

Answer 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。要么 display：inline-block + vertical-alignment：top .brd用于演示目的。

iFrame 100％高度会导致垂直滚动条

5 个答案: