Why height:100% is the size of the containing block, but in IE is the height of the window?
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.
加载中,请稍侯......
精彩评论