如何在Internet Explorer中使用全高度表创建全高度单元格
Hen*_*tle 2 html css internet-explorer
我有下一个HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html {height:100%;}body {height:100%;margin:0;}
h1 {form-size:20px;margin:0;padding:20px;}
</style>
</head>
<body>
<table style="width:100%;height:100%">
<tr>
<td>
<div style="background-color:#f00;">
<h1>This text should make height of this cell</h1>
</div>
</td>
</tr>
<tr style="height:100%;" id="row">
<td style="background-color:#c0c;">
<div style="height:100%;width:100%;background-color:#00f;color:#fff;">
This cell should take all unused space of table
</div>
</td>
</tr>
<tr>
<td>
<div style="background-color:#0f0;">
<h1>This text should make height of<br> this cell</h1>
</div>
</td>
</tr>
</table>
</body>
</html>
它在所有浏览器中都很完美 - 除了IE,其中中间单元格中的蓝色div仅占用文本空间.可能有人知道如何将它拉伸到桌子内的整个自由空间？
更新:我知道页面布局中的表格不好.如果你能告诉我div格式的例子,它有顶部和底部块,可变高度和中间部分,使用浏览器窗口的所有可用空间,我将使用它.我保证=)
请不要使用表格进行布局,
使用Div和CSS,使用表被认为是一种不好的做法:
http://shouldiusetablesforlayout.com
http://www.hotdesign.com/seybold/
http://webdesign.about.com/od/layout/a/aa111102a.htm
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
- 向我展示顶部和底部可变高度的div示例.我保证会使用它. (4认同)