如何使用 CSS 指定 DOCTYPE 在 100% 高度表中修复表行高度？答案

【问题标题】：How can I fix a table row height in a 100% height table with a DOCTYPE specified using CSS?如何使用 CSS 指定 DOCTYPE 在 100% 高度表中修复表行高度？
【发布时间】：2010-10-04 23:25:11
【问题描述】：

这是Can I create a HTML table width a percentage height but pixel accurate row heights? 的后续问题。

我在 HTML 页面中有一个表格，将用于表格数据（所以我不想要基于 div 的答案）。这需要以 100% 的高度呈现，第一行具有固定大小，第二行拉伸以适应剩余的可用区域。

我使用了以下代码：

<html>
  <body>
    <table style="border-collapse:collapse;height:100%;width:100%;">
      <tr>
        <td style="border:solid 1px black;height:100px">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr>
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

这可以按我的要求工作。

问题是，当我将它放入在 Visual Studio 中创建的 ASP.NET 页面中时，它会添加一个 DOCTYPE 元素。添加 DOCTYPE（并将 html 和 body 标签的 CSS 设置为包含 height:100%）后，表格的顶行比底行大得多，并且两行都没有固定高度。

我知道我应该使用 DOCTYPE 而不是依赖 Internet Explorer 中的“怪癖模式”来确保未来的兼容性。但是，我已经尝试了所有可以找到的 DOCTYPE 来尝试将此行为更改为我需要的但无法使其正常工作。它在 Firefox 中确实有效，但该工作适用于用户使用 IE7 的 Intranet。

如果您想查看问题，请尝试以下操作：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
  <body style="height:100%">
    <table style="border-collapse:collapse;height:100%;width:100%;">
      <tr>
        <td style="border:solid 1px black;height:100px">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr>
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

有人知道答案吗？

【问题讨论】：

-1 工作解决方案已在该问题stackoverflow.com/questions/495194/… 中发布
@cletus：该解决方案在标准模式下对我不起作用。 #bottom div 与窗口一样高，#top 顶部有 100px，所以我得到了一个滚动条。
是的。对我也不起作用。

标签： asp.net html css

【解决方案1】：

有一种简单的方法可以解决此问题，尤其是当页面仅包含此表，而您只是希望它正常工作时。我不确定 ASP.NET 是否会让您：在文档类型前添加注释。例如

<!-- Here for IE6/7 -->
<!DOCTYPE html (etc.)>
... The HTML that works in quirks mode ...

这将使 IE6 和 IE7 触发 quirks 模式，这意味着那些较早的答案实际上会起作用。但它是对 DOCTYPE 的完全有效使用，并且会在所有其他浏览器中触发 standards 模式。 IE8（无论如何是 RC1）也为此使用了 quirks 模式，尽管它在标准模式下也能正确呈现。

当然，将 IE6 和 7 保持在 quirks 模式意味着它们对于所有其他内容也将处于 quirks 模式，所以如果您要使用很多其他 CSS，您可能会后悔。

【讨论】：

【解决方案2】：

我尝试尽可能少地使用 %，因为填充、边框和边距会添加到 100% 宽度（如果有的话），除非您使用石器时代的浏览器。我过去只是平铺背景图像来伪造任何东西我想在父元素或主体上拥有 100% 的高度。

【讨论】：

【解决方案3】：

好吧，solution 我发布到您的问题中，它有一个（必要的）div 包裹在您的桌子上，与该 DOCTYPE 以及我尝试过的其他几个完美配合，所以我不确定问题是什么。

您是否只是因为其中有一个 div 而选择忽略它？还是您没有阅读或尝试过？ div有什么问题？

【讨论】：

嗨。我确实试过你的例子。也许我错过了一些东西（因为我承受着很大的压力要推出一些软件，所以我很快就开始测试了。）但是，我发现底行是窗口高度的 100%，而不仅仅是窗口的其余部分.我错过了什么？
...div 没问题。我正在使用它们进行布局。

【解决方案4】：

首先我建议将高度设置在行级别，而不是单元级别。其次，如果您将第二行的高度设置为 100%，IE 将让它填满表格中剩余的可用空间。以下应该有效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%">
  <body style="height:100%">
    <table style="border-collapse:collapse;height:100%;width:100%; table-layout:fixed;">
      <tr style="height: 100px;">
        <td style="border:solid 1px black">1</td>
        <td style="border:solid 1px black">2</td>
      </tr>
      <tr style="height: 100%">
        <td style="border:solid 1px black">3</td>
        <td style="border:solid 1px black">4</td>
      </tr>
    </table>
  </body>
</html>

虽然使用基于百分比的高度可能不是您的最佳选择，但在不了解和理解您要完成的任务的情况下，这是我能给您的最佳建议

【讨论】：

我在这里看到与 cletus 的回答相同的问题。顶部单元格是固定的，底部单元格会随窗口扩展，但表格比浏览器窗口高 100 像素。本质上，底行是窗口高度的 100%，而不仅仅是顶行之后的剩余高度。 (IE7)