Why height:100% is the size of the containing block, but in IE is the height of the window?_问答_开发者

Why height:100% is the size of the containing block, but in IE is the height of the window?

开发者 https://www.devze.com 2023-03-08 11:25 出处：网络

I have something like this: <table style=\"height:100%\"> <tr><td style=\"height:250px;\"></td></tr>

I have something like this:

<table style="height:100%">
<tr><td style="height:250px;"></td></tr>
<tr><td style="height:100%;"><div style="height:100%;"&g开发者_JS百科t;</div></td></tr>
</table>

In firefox it works well, the table is the size of the window and the second tr fills in the remaining space from the bottom, but in IE the div from the second td has the height of the window and this causes a scrollbar.

Here is the code: http://jsbin.com/uruki4

You can better use div's instead of a table. The following code works in Safari 5, IE7+ and Chrome:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title></title>
        <style type="text/css">
        * { margin:0; padding:0 }
        #fixed, #fill { position:absolute; width:100% }
        #fixed { top:0; height:250px; background:red }
        #fill { top:250px; bottom:0 }
        #fill iframe { position:absolute; bottom:0 }
        </style>
    </head>
    <body>
        <div id="fixed"></div>
        <div id="fill">
            <iframe src="http://google.com" width="100%" height="100%" frameborder="0"></iframe>
        </div>
    </body>
</html>

Make sure you include the doctype because else IE wont use the standard. Other browsers do this by default.