100% 高度的嵌套表格超出了 IE 中的屏幕答案

【问题标题】：Nested table of 100% height exceeds screen in IE100% 高度的嵌套表格超出了 IE 中的屏幕
【发布时间】：2011-07-19 03:45:09
【问题描述】：

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

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

如何解决这个问题？

【问题讨论】：

哪个版本的IE？它们中的任何一个都与彼此或其他现代浏览器的工作方式不同。
我正在使用 IE9 进行测试。
解决此问题的最佳方法是不使用表格。你想达到什么目的？为什么你需要填满整个可用空间？
这是我正在构建的应用程序的设计要求。我使用的是嵌套表，因为它的内容是表格数据。

标签： html css internet-explorer html-table

【解决方案1】：

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

<!–- For Internet Explorer -–> 在<!DOCTYPE HTML> 上方的一行

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

【讨论】：

我刚刚尝试过，这个解决方案有效，但删除 doctype 会导致很多其他问题。这真的是唯一可能的方法吗？
对于这种情况，处理IE是最简单的方法。看起来无论您尝试什么，您都会遇到 IE 错误。虽然你说 CSS 布局不是一种选择，但我会这样做。
如果有帮助的话，CSS 布局绝对是一种选择。也许您可以概述一些我可以用来获得类似布局的 CSS 技术？
查看一些 CSS 流式布局教程。根据您的代码，它似乎接近您想要做的。还要查看 CSS 顶部和底部属性。我可以说您的用例缺少很多信息，因此我不确定如何引导您获得更准确的信息。祝你好运！
@Anton：为了推荐 CSS 技术，您需要解释您想要实现的目标（正如我在其他评论中所问的）。目前，您的表格只是用另一种颜色填充背景，您可以通过设置主体的背景颜色来做到这一点。详细解释为什么需要填满整个屏幕，这样更容易提供帮助。

【解决方案2】：

改变

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

到

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

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

【讨论】：

这不是我想要的。使用这种方法，底部的某些内容将在 IE 中变得无法访问。
@Anton：会发生这种情况吗？你试过了吗？请发布确切的o / p，您到底想要什么？
如果嵌套表格中的内容是底部对齐的，就会发生这种情况，并且如果表格包含更多内容，那么浏览器窗口可以在没有滚动条的情况下保持一定会发生这种情况。