Question

这是一段代码来说明我的问题：

<!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嵌套表中确实超出了屏幕高度，高于上面的标题高度，从而导致垂直滚动条，这是一种不受欢迎的行为。

如何解决这个问题？

Answer 1

IE在表格中计算高度并不好。在这种情况下，它将单元格高度设置为body和html的100％而不是其父容器。最简单的事情，但也是一个丑陋的黑客，是把

<!–- For Internet Explorer -–>位于<!DOCTYPE HTML>

之上的一行

这将强制IE进入quirksmode，并且应该为您的情况正确呈现。您可能必须重新启动IE，而不是在添加注释后简单地刷新页面。

Answer 2

更改

html, body {height:100%;margin:0;padding:0;}

到

html, body {height:100%;margin:0;padding:0; overflow-y: hidden;}

它将从IE（或任何网络浏览器）中删除垂直滚动条

在IE中，100％高度的嵌套表超过了屏幕

2 个答案: