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

【问题标题】：IFRAME Fit entire content no scroll barIFRAME 适合整个内容没有滚动条
【发布时间】：2014-03-16 02:12:33
【问题描述】：

您好，我的 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 上？

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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%"

【讨论】：