CODEWITHSUNDEEP
htmlcssinternet-exploreriframeinternet-explorer-8
Owen Pauling
Owen Pauling

Reputation: 11841

IFRAME won't display 100% height in IE8, but fine in IE11 and Firefox

I have a HTML page with an iframe in a div. The iframe height should be 100% of the available window height. This displays as expected in IE11 and Firefox, but in IE8 the iframe remains at a fixed size, regardless of the window size or the iframe content. When the browser is fullscreen, this is about 1/3 of the screen space.

Is this a quirk of IE8? How can I get the iframe to consume 100% height?

The browser is not in compatibility mode.

Cut-down example: 

html{
   height:100%;
}
body {
    display:table;
    width:100%;
    height:100%; 
}

.row{
    display:table-row;
    height:100%; 
}

.iframeContainer{
    height:100%;
    width:100%;
}

.iframeContainer iframe{
    width:100%; 
    height:100%; 
    border-style:solid !important; 
    border:2px; 
}
<!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="style.css">
        </head>
        <body>
            <div class="row">
                <div class="iframeContainer">
                    <iframe></iframe>
                </div>
            </div>
        </body>
    </html>

Upvotes: 2

Views: 3533

Answers (3)

user4749485
user4749485

Reputation: 1028

<!DOCTYPE html>
<html>
    <head>
    <style type=text/css>

        html,body{ padding:0;margin:0 }

        html{
           height:100%;
        }

        body {
            display:table;
            width:100%;
            height:100%; 
            position:relative;
            background-color:lightcoral;
        }

        .row{
            display:table-row;
            height:100%; 
            /*width:100%*/
        }

        .iframeContainer{
            /*height:100%;*/    /* use h+w instead of positioning below if outer (coral) frame is undesired */
            /*width:100%;*/
            /*display:table-cell;*/
            position:absolute;top:0;right:0;bottom:0;left:0;margin:1em;
        }

        iframe{
            width:100%;
            height:100%;
            border-style:solid !important; 
            border:2px; 
        }
    </style>
    </head>
    <body>
        <div class="row">
            <div class="iframeContainer">
                <iframe src="about:blank" onload="this.contentDocument.body.style.backgroundColor='lavender'" frameborder=0></iframe>
            </div>
        </div>
    </body>
</html>




If I am understanding your purpose in setting body to display:table, it is for centering.  I am more comfortable using the position: technique with top,right,bottom,left=0 as the CSS 2.1 endorsed hack.  Whatever gets the job done, I guess.

Using the table trick with IE8, it needs the iframeContainer wrapper to be display:table-cell.  Else, as you explained, it fails to compute width+height and then the iframe w+h based on it doesn't work.  But even with the table-cell wrapper, it still makes the width+height difficult to manage, without slightly overflowing the viewport.  Here's an experiment with it:  table-cell demo

Without totally changing your table strategy, we can still slip positioning into the style and get IE8 to work.  In doing so, it automatically sizes the box within the viewport without overflowing it.  In the above markup, I went a step further and framed the table with a 1em coral boundary. (because it was easy at that point).  Here it is online:  table-cell positioned

Upvotes: 2

Prime
Prime

Reputation: 3625

You can target only IE8 and less version IE browsers with CSS conditional comments.

Method -1

<!--[if lte IE 8]>
<style type="text/css">
* html, body { height: 100%; width:100%; margin:0; padding:0; }
iframe { padding-bottom: 0; height:100%; }

</style>
<![endif]-->

Method -2

html, body{
height: 100%;
margin: 0;
padding: 0;
}

Method -3 

<iframe width="100%" height="100%" marginheight="0" marginwidth="0" frameborder="0" src="/chatbox/testb.html"></iframe>

100% height iframe with content

enter image description here

Still 100% height iframe without content.

enter image description here

Upvotes: 2

csb
csb

Reputation: 336

You could try 

 height: 100vh;

This would make the iframe 100% of the viewport height

Upvotes: -1

Related Questions