HTML Element Style How to - Create a full page iframe








Question

We would like to know how to create a full page iframe.

Answer


<html>
    <head>
        <style type="text/css">
            body, html<!--from   w  w w  .j  av  a  2  s.  c  o m-->
            {
                margin: 0; padding: 0; height: 100%; overflow: hidden;
            }
            #header
            {
                position:absolute; left: 0; top: 0; right: 0; height: 90px; background: red;
            }
            #content
            {
                position:absolute; left: 0; right: 0; bottom: 0; top: 90px; background: blue; height: expression(document.body.clientHeight-90);
            }
        </style>
    </head>
    <body>
        <div id="header">
            Test content
        </div>
        <div id="content">
            <iframe width="100%" height="100%" src="" />
        </div>
    </body>
</html>

The code above is rendered as follows: