全屏iframe的高度为100%(Full

编程入门 行业动态 更新时间:2024-10-20 03:40:22
全屏iframe的高度为100%(Full-screen iframe with a height of 100%)

所有浏览器中是否支持iframe height = 100%?

我正在使用doctype作为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

在我的iframe代码中,如果我说:

<iframe src="xyz.pdf" width="100%" height="100%" />

我的意思是它实际上会占据剩余页面的高度(因为顶部有另一个框架,固定高度为50px)所有主流浏览器(IE / Firefox / Safari)都支持这一点吗?

还有关于滚动条,即使我说scrolling="no" ,我可以看到禁用的滚动条在Firefox ...如何完全隐藏滚动条并自动设置iframe高度?

Is iframe height=100% supported in all browsers?

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

In my iframe code, if I say:

<iframe src="xyz.pdf" width="100%" height="100%" />

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

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个示例应该可以工作:

<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选项,如上所示:

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

第二个例子:

<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的滚动条全宽!

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>

An alternative:

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

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>

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!

更多推荐

本文发布于:2023-08-04 08:56:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1412512.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:全屏   高度   Full   iframe

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!