高度为 100% 的全屏 iframe [英] Full-screen iframe with a height of 100%
问题描述
所有浏览器都支持 iframe height=100% 吗?
Is iframe height=100% supported in all browsers?
我使用文档类型为:
<!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%" />
我的意思是它实际上会占用剩余页面的高度(因为顶部有另一个固定高度为 50px 的框架)所有主流浏览器(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!
这篇关于高度为 100% 的全屏 iframe的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
