16

在我看来，DOCTYPEIE（6-8）中的某些声明可能会导致浏览器忽略height="100%"表和 div（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需要垂直拉伸。

所以我的问题是：

  1. 为什么会这样？
  2. 你如何保持DOCTYPE并且仍然允许表格伸展？
  3. 是否/发生在你身上？
  4. 你知道吗？它是众所周知的吗？
4

3 回答 3

10

  1. 因为古代浏览器有奇怪的、不一致的行为，并且浏览器将 Doctypes 视为一项智力测试，以查看作者是否按照标准编写代码，或者他们在十年前从 W3Schools 那里学到了什么。如果你有height: 100%并且父元素的高度是auto然后100%意味着auto。

  2. 一般来说，你不会。它尖叫“布局表”。也就是说，在 html 和 body 元素上设置高度或最小高度。还有其他技术，但我目前没有方便的链接，因为奇怪的是，我从未处于需要该技术的位置。

  3. 这是浏览器应该做的，所以……</p>

  4. 好吧，我正在回答这个问题……</p>

于 2010-01-04T06:50:25.707 回答
8

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

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

#mydiv {
    height: 100%;
}

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

于 2012-02-10T10:21:58.540 回答
1

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

您必须在容器元素上设置高度，以便具有 100% 高度的 div 不会继承 height: auto;

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

于 2011-10-05T15:58:29.217 回答