全屏iframe，高度为100％ [英] Full-screen iframe with a height of 100%
问题描述
所有浏览器都支持iframe height = 100％？
Is iframe height=100% supported in all browsers?
我使用的是doctype：
I am using doctype as:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在我的iframe代码中，如果我说：
In my iframe code, if I say:
<iframe src="xyz.pdf" width="100%" height="100%" />
我的意思是它实际上会占用剩余页面的高度固定高度为50像素）
这是否在所有主流浏览器（IE / Firefox / Safari）中都支持？
I mean will it actually take the height of the remaining page (as there is another frame on top with fixed height of 50px) Is this supported in all major browsers (IE/Firefox/Safari) ?
关于滚动条，即使我说 scrolling =no，我可以在Firefox中查看已禁用的滚动条...如何完全隐藏滚动条并自动设置iframe高度？
Also regarding scrollbars, even though I say scrolling="no", I can see disabled scrollbars in Firefox...How do I completely hide scrollbars and set the iframe height automatically?
推荐答案
您可以使用框架集作为先前的答案状态，但如果您坚持使用iFrames，以下2个示例应该工作：
You could use frameset as the previous answer states but if you are insistent on using iFrames, the 2 following examples should work:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
</body>
另一种方法：
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
</body>
如上所示，隐藏带有2个备选项的滚动：
To hide scrolling with 2 alternatives as shown above:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;height:150%;width:150%" height="150%" width="150%"></iframe>
</body>
使用第二个示例进行修改：
Hack with the second example:
<body style="margin:0px;padding:0px;overflow:hidden">
<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:150%;width:150%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="150%" width="150%"></iframe>
</body>
要隐藏iFrame的滚动条，父项会被设置为 overflow ：hidden 来隐藏滚动条，并且iFrame被设置为高达150％的宽度和高度，这迫使页面外的滚动条，并且由于主体没有滚动条， iframe要超过页面的边界。这会隐藏iFrame的滚动条全宽！
To hide the scroll-bars of the iFrame, the parent is made overflow: hidden to hide scrollbars and the iFrame is made to go upto 150% width and height which forces the scroll-bars outside the page and since the body doesn't have scroll-bars one may not expect the iframe to be exceeding the bounds of the page. This hides the scrollbars of the iFrame with full width!
这篇关于全屏iframe，高度为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
