Question

我有这样的事情：

<table style="height:100%">
<tr><td style="height:250px;"></td></tr>
<tr><td style="height:100%;"><div style="height:100%;"></div></td></tr>
</table>

在firefox中运行良好，表格是窗口的大小，第二个tr从底部填充剩余空间，但在IE中，第二个td的div具有窗口的高度，这会导致滚动条

以下是代码：http://jsbin.com/uruki4

Answer 1

您可以更好地使用div代替表格。以下代码适用于Safari 5，IE7 +和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>

确保包含doctype，因为IE不会使用该标准。其他浏览器默认执行此操作。

为什么高度：100％是包含块的大小，但在IE中是窗口的高度？

1 个答案: