Full-screen iframe with a height of 100%

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?

标签： javascript html css iframe html-frames

15条回答

一个人的天荒地老

2楼-- · 2018-12-31 08:01

This worked very nicely for me (only if iframe content comes from the same domain):

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="./page.html" onLoad="calcHeight(this);" frameborder="0" scrolling="no" id="the_iframe" width="100%" ></iframe>

0人赞添加讨论(0) 举报

步步皆殇っ

3楼-- · 2018-12-31 08:02

Here is a concise code. It does relies on a jquery method to find the current window height. On load of iFrame it sets the height of the iframe be the same as the current window. Then to handle resizing of the page, the body tag has an onresize event handler which sets the iframe's height whenever the document is resized.

<html>
<head>
    <title>my I frame is as tall as your page</title>
     <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body onresize="$('#iframe1').attr('height', $(window).height());" style="margin:0;" >
    <iframe id="iframe1" src="yourpage.html" style="width:100%;"  onload="this.height=$(window).height();"></iframe>
</body>
</html>

here's a working sample: http://jsbin.com/soqeq/1/

0人赞添加讨论(0) 举报

浅入江南

4楼-- · 2018-12-31 08:02

Only this worked for me (but for "same-domain"):

function MakeIframeFullHeight(iframeElement){
    iframeElement.style.width   = "100%";
    var ifrD = iframeElement.contentDocument || iframeElement.contentWindow.document;
    var mHeight = parseInt( window.getComputedStyle( ifrD.documentElement).height );  // Math.max( ifrD.body.scrollHeight, .. offsetHeight, ....clientHeight,
    var margins = ifrD.body.style.margin + ifrD.body.style.padding + ifrD.documentElement.style.margin + ifrD.documentElement.style.padding;
    if(margins=="") { margins=0;  ifrD.body.style.margin="0px"; }
    (function(){
       var interval = setInterval(function(){
        if(ifrD.readyState  == 'complete' ){
            iframeElement.style.height  = (parseInt(window.getComputedStyle( ifrD.documentElement).height) + margins+1) +"px";
            setTimeout( function(){ clearInterval(interval); }, 1000 );
        } 
       },1000)
    })();
}

you can use either:

MakeIframeFullHeight(document.getElementById("iframe_id"));

<iframe .... onload="MakeIframeFullHeight(this);" ....

0人赞添加讨论(0) 举报

浪荡孟婆

5楼-- · 2018-12-31 08:03

1. Change your DOCTYPE to something less strict. Don't use XHTML; it's silly. Just use the HTML 5 doctype and you're good:

<!doctype html>

2. You might need to make sure (depends on the browser) that the iframe's parent has a height. And its parent. And its parent. Etc:

html, body { height: 100%; }

0人赞添加讨论(0) 举报

几人难应

6楼-- · 2018-12-31 08:05

3 approaches for creating a fullscreen `iframe`:

Approach 1 - Viewport-percentage lengths

In supported browsers, you can use viewport-percentage lengths such as height: 100vh.

Where 100vh represents the height of the viewport, and likewise 100vw represents the width.

Example Here

body {
    margin: 0;            /* Reset default margin */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    height: 100vh;        /* Viewport-relative units */
    width: 100vw;
}

<iframe></iframe>

Approach 2 - Fixed positioning

This approach is fairly straight-forward. Just set the positioning of the fixed element and add a height/width of 100%.

Example Here

iframe {
    position: fixed;
    background: #000;
    border: none;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
}

<iframe></iframe>

Approach 3

For this last method, just set the height of the body/html/iframe elements to 100%.

Example Here

html, body {
    height: 100%;
    margin: 0;         /* Reset default margin on the body element */
}
iframe {
    display: block;       /* iframes are inline by default */
    background: #000;
    border: none;         /* Reset default border */
    width: 100%;
    height: 100%;
}

<iframe></iframe>

0人赞添加讨论(0) 举报

其实，你不懂

7楼-- · 2018-12-31 08:09

<iframe src="" style="top:0;left: 0;width:100%;height: 100%; position: absolute; border: none"></iframe>

0人赞添加讨论(0) 举报

1 2 3 下一页