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

本文介绍了在IE中，100％高度的嵌套表超过屏幕的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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％高度的嵌套表超过屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！