为什么某些DOCTYPE声明会导致100%高度的表和div停止工作？
为什么某些DOCTYPE声明会导致100%高度的表和div停止工作？
提问于 2010-01-04 14:36:58
在我看来，IE (6-8)中的一些DOCTYPE声明可能会导致浏览器忽略表和div上的height="100%" (style="height:100%")
E.g
<!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根据需要垂直拉伸。
所以我的问题是：
为什么会发生这种情况? stretch?
- Does
- 如何保持
DOCTYPE并仍然允许表/这发生在你身上吗？
- 你知道吗?这是众所周知的吗？
回答 3
Stack Overflow用户
回答已采纳
发布于 2010-01-04 14:50:26
- ，因为古代浏览器有奇怪的，不一致的行为，浏览器对待像an intelligence test这样的Doctype，看看作者是按照标准还是十年前从W3Schools学到的东西来写代码。如果你有
height: 100%，并且父元素的高度是auto，那么你就没有了，它会尖叫"layout table“。也就是说，在html和body元素上设置高度或最小高度。还有其他的技术，但我目前没有一个方便的链接，因为奇怪的是，我从来没有在一个我需要技术的地方。 - 这是浏览器应该做的事情，所以…
- 好的，我正在回答这个问题…
Stack Overflow用户
发布于 2012-02-10 18:21:59
这个“问题”的真正解决方案是使用以下CSS：
html, body {
margin: 0;
padding: 0;
border: none;
height: 100%;
}
#mydiv {
height: 100%;
}但是请记住，边框会增加高度。
Stack Overflow用户
发布于 2011-10-05 23:58:29
当您删除doctype时，浏览器将进入quirks模式，该模式以不同的方式帮助未经验证的旧代码正确呈现。
你必须在容器元素上设置高度，这样高度为100%的div就不会继承height: auto；
您可以尝试从过渡切换到严格，但我怀疑这是否能解决您的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1997842
复制相关文章
相似问题