可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I see alot of questions about 100% height iFrames but noone seems to have the exact same problem as I do.

What I want to do is to have an iFrame that covers the entire viewport, with no scrollbars, without setting overflow: hidden on the body.

I get a 5px bottom margin to my iFrame that won't go away with css, and it causes a vertical scroolbar. The standard advice seems to be to set overflow: hidden on the body, but that's not really solving the problem, and it's not enough for me.

Here's a super simple jsFiddle example. (notice the double vertical scrollbars)

This behaviour is the same in Chrome 15, IE9 and FF9 for me.

回答1:

It's not the iframe that produces the scrollbar, it's the whitespace after it

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

If you don't want to see it, use

* { line-height: 0; }

edit: Turns out the problem persists if you remove the whitespace, but the solution is the same. Iframes are rendered as inline elements by default (iframe = 'inline frame'), and thus have a line-height which causes the issue.

Alternatively, you may want to try iframe { display: block; } or a combination of both solutions.

回答2:

Update:

working example in chrome 16.0.*, firefox 10.* (apparently ie9 acts up and displays a scrollbar either way -- either a disabled one if the height is set to 99% or a active one that can't scroll if height is 100%):

place the following in a html file and open it (don't know what jsfiddle is doing different, but it doesn't work the same way)

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

回答3:

Not seeing a vertical scroll-bar outside of jsFiddle with this:

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

EDIT: Here's a snippet from under the Elements tabs of what gets selected when I inspect the white-space in Chrome.

回答4:

To summarize it:

white space before causes 4px white space at the rigth of the iframe.
white space after csuses 4px white space after the iframe.

This is due to the inline character of iframe as pointed out in the first post.

回答5:

To prevent the scroll bar try this:

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>

The .bbox style prevents sub divs from growing. .Vat is necessary for IE and Firefox. An alternative for .vat is: display:block. Or display:inline-block + vertical-alignment:top .brd is for demonstration purposes.