Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
415 views
in Technique[技术] by (71.8m points)

javascript - 全屏iframe,高度为100%(Full-screen iframe with a height of 100%)

Is iframe height=100% supported in all browsers?

(所有浏览器都支持iframe height = 100%吗?)

I am using doctype as:

(我使用doctype作为:)

<!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代码中,如果我说:)

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

(我的意思是说,它实际上会占用其余页面的高度吗(因为顶部还有另一个固定高度为50px的框架),所有主流浏览器(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?

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

  ask by testndtv translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You could use frameset as the previous answer states but if you are insistent on using iFrames, the 2 following examples should work:

(您可以使用框架集作为先前的答案状态,但是如果您坚持使用iFrame,则以下两个示例应该可以工作:)

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

(如上所示,要隐藏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>

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.

(为了隐藏iFrame的滚动条,父级将overflow: hidden以隐藏滚动条,并且iFrame的宽度和高度将达到150%,这迫使滚动条在页面外部,并且由于主体没有滚动条可能不会期望iframe超出页面范围。)

This hides the scrollbars of the iFrame with full width!

(这会隐藏全幅iFrame的滚动条!)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...