IFRAME 自适应整个内容,无滚动条

6

你好,我无法使我的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中?
3个回答

13

将这段代码用于你的程序中,你遇到的问题是它必须设置为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>

0

两个答案都是正确的,但存在一些缺陷。相反,这应该在任何现代浏览器中运行*:

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

查看演示

请查看 seamless 属性 浏览器兼容性

*如需支持 HTML4,请将以下内容添加到 iframe 中:frameborder="0" height="100%" width="100%"


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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接