在IE中，100％高度的嵌套表超过屏幕 [英] Nested table of 100% height exceeds screen in IE
问题描述
这是一段代码来说明我的问题：
Here's a piece of code to illustrates my problem:
<!DOCTYPE HTML>
<html>
<head>
<style>
html, body {height:100%;margin:0;padding:0;}
table {border-collapse:collapse;}
</style>
</head>
<body>
<table width='100%' height='100%'>
<tr>
<td>
header
</td>
</tr>
<tr>
<td valign='top' height='100%'>
<table width='100%' height='100%' bgcolor='red'>
<tr>
<td>test</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
我正在构建的页面上有一个标题和一个表格，表格必须包含所有垂直空间可用，但不得超过屏幕高度。代码以上工作正常在FF / Chrome / Safari，但在IE嵌套表确实超过屏幕高度完全上面的标题的高度，因此造成垂直滚动条这是一个不良的行为。
Page that I'm currently building has a header and a table below it, table must take all the vertical space available but must not exceed the screen height. Code above works fine in FF/Chrome/Safari but in IE nested table does exceeds the screen height exactly by the height of header above thus causing vertical scrollbar which is an undesired behavior.
如何解决这个问题？
推荐答案
IE不利于计算表中的高度。在这种情况下，它将单元格的高度设置为body和html的100％，而不是其父容器。
最简单的事情，但也是一个丑陋的黑客，是
IE is not good about calculating heights in tables. In this case, it's setting the cell height to 100% of the body and html rather than its parent container. Easiest thing to do, but also an ugly hack, is to put
<！ - 对于Internet Explorer - > ; <！DOCTYPE HTML>
进入quirksmode，并应适当地为您的情况。您可能必须重新启动IE，而不是在添加注释后刷新页面。
This will force IE into quirksmode and should render properly for your case. You may have to restart IE rather than simply refresh the page after adding the comment.
这篇关于在IE中，100％高度的嵌套表超过屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
