为什么某些 DOCTYPE 声明会导致 100% 高度的表格和 div 停止工作？答案

【问题标题】：Why certain DOCTYPE declarations cause 100%-height tables and divs to stop working?为什么某些 DOCTYPE 声明会导致 100% 高度的表格和 div 停止工作？
【发布时间】：2012-02-10 18:21:58
【问题描述】：

在我看来，IE (6-8) 中的一些 DOCTYPE 声明可能会导致浏览器忽略表和 div 上的 height="100%" (style="height:100%")

例如

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title>Test1</title>
 </head>
 <body>
  <div style="border: 2px solid red; height: 100%">
  Hello World
  </div>
 </body>
</html>

将呈现DIV 与文本的高度，它不会拉伸。删除 DOCTYPE 声明会导致 DIV 根据需要垂直拉伸。

所以我的问题是：

为什么会这样？
如何保持DOCTYPE 和仍然允许表格伸展？
您是否遇到过这种情况？
你知道吗？它是众所周知的吗？

【问题讨论】：

height: 100% 在没有 DOCTYPE 的情况下工作是有特定原因的。在这里查看我的解释：stackoverflow.com/a/32215263/3597276

标签： html doctype quirks-mode transitional

【解决方案1】：

因为古代浏览器有奇怪的、不一致的行为，并且浏览器将 Doctype 视为 an intelligence test 以查看作者是否按照标准编写代码，或者他们在十年前从 W3Schools 那里学到了什么。如果你有height: 100%，并且父元素的高度是auto，那么100% means auto。
一般情况下，您不会。它尖叫着“layout table”。也就是说，在 html 和 body 元素上设置高度或最小高度。还有其他技术，但我目前没有方便的链接，因为奇怪的是，我从未处于需要该技术的位置。
这是浏览器应该做的，所以……
好吧，我正在回答这个问题……

【讨论】：

所以删除 DOCTYPE 声明是纯粹的邪恶？让页脚粘在底部是不好的 UI？
是的，也不是。您可能误解了我关于将 table 底部粘在窗口和/或页面底部（以较长者为准）的评论。
所以要理解，坚持到底，不是问题，而是“布局表”模式，因为a）它不能使用它来完成（如果你保留DOCTYPE）和b ) 也是一种不好的做法 (hotdesign.com/seybold)。为此，应该使用其他技术（例如纯粹的 DIV 和 CSS）。我做对了吗？
您应该使用任何具有最能描述内容的语义的标记（div 是最后的手段，因为它没有语义，如果数据是表格形式，表格只是一个选项）。

【解决方案2】：

真正解决这个“问题”的方法是使用以下 CSS：

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

#mydiv {
    height: 100%;
}

但请记住，边框会增加高度。

【讨论】：

谢谢！缺少 html 选择器

【解决方案3】：

当您删除 doctype 时，浏览器会进入 quirks 模式，该模式会以不同的方式帮助未经验证的旧代码正确呈现。

你必须在容器元素上设置高度，这样高度为 100% 的 div 就不会继承 height: auto;

您可以尝试从过渡转换为严格，但我怀疑这会解决您的问题。

【讨论】：