IFRAME适合整个内容，没有滚动条

Hello well I can not get my IFRAME to work. I want its height to fit the entire content area. When I put height 100% it does not fit the entire area and only fits about 3/4s of the content area. Here is my code:

你好，我的IFRAME无法工作。我希望它的高度适合整个内容区域。当我把高度设为100%时，它不适合整个区域，只适合3/4的内容区域。这是我的代码:

<iframe src="some.html" frameborder="0" style="overflow:hidden; display:block; height:100%; width:100%" height="100%" width="100%">
<p style="">Your browser does not support iframes.</p>

How can I fit entire content are on my iframe?

如何将iframe上的全部内容填满?

3 个解决方案

#1

Use this in your code, your problem was that it had to be set to position: absolute, otherwise it'll just give you the width and height you need.

在你的代码中使用这个，你的问题是它必须被设置为:绝对，否则它只会给你你需要的宽度和高度。

 <body style="margin: 0 auto;">
        <iframe src="some.html" frameborder="0" 
         style="overflow:hidden; 
         display:block; position: absolute; height: 100%; width: 100%">
<p style="">
         Your browser does not support iframes.
</p>
</body>

#2

add body,html{ height: 100% } to your css, should fix your issue. This assumes that the body tag is your parent. This fiddle might help you out a little - http://jsfiddle.net/8qALc/

添加body,html{高度:100%}到你的css，应该解决你的问题。这假定body标记是您的父标记。这个小提琴可能会帮助您解决一点问题——http://jsfiddle.net/8qALc/

#3

Both answers are quite right but there are some flaws. Instead, this should work in any modern browser *:

这两个答案都很正确，但也有一些缺陷。相反，这应该适用于任何现代浏览器*:

<style>
/* Unless you use normalizer or some other CSS reset, 
you need to set all these properties. */
body,html{ height: 100%; margin:0; padding:0; overflow:hidden; }
</style>

<!--
* frameborder is obsolete in HTML5.
* in HTMl5 height and width properties are set in pixels only. 
Nonetheless, there is no need to set these values twice.
* scroll bars should be dictated by the embedded content, 
so to avoid double scroll bars, overflow is moved to the html,body tags.
There is a new attribute named seamless that allows the inline frame to
appear as though it is being rendered as part of the containing document, 
so no borders and scrollbars will appear. 
Unfortunately this is not supported by browsers yet.
-->
<iframe src="some.html" style="position:relative; border:0; height:100%; width:100%;">
<p>Your browser does not support iframes.</p>

See demo

看到演示

See seamless property browser compatibility.

参见无缝属性浏览器兼容性。

*For HTML4 support add these to the iframe: frameborder="0" height="100%" width="100%"

*对于HTML4支持将这些添加到iframe: frameborder="0"高度="100%"宽度="100%"

#1