Question

您好我无法让我的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>

如何将整个内容放在我的iframe上？

Answer 1

在您的代码中使用此功能，您的问题是必须将其设置为position: absolute，否则它只会为您提供所需的宽度和高度。

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

Answer 2

将body,html{ height: 100% }添加到您的CSS，应该解决您的问题。这假设body标签是您的父标签。这个小提琴可能会帮助你一点点 - http://jsfiddle.net/8qALc/

Answer 3

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

<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

请参阅seamless属性browser compatibility。

*对于HTML4支持，请将这些内容添加到iframe：frameborder="0" height="100%" width="100%"

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

3 个答案: