为什么 min-height:100% 自声明文档类型后不起作用？

Question

我有一个带有 class .app 的 div，它具有以下 css 规则：

.app {
    width: 960px;
    margin: 40px auto 0 auto;
    background: #fff;
    min-height: 100%;
    z-index: 1;
}

min-height 按预期工作，让应用程序 div 填满屏幕，即使它是空的 - 这是因为内容是通过 ajax 加载的，我想要div 甚至在内容加载之前就到达屏幕底部。

但是，我之前忘记将 <!DOCTYPE html> 添加到我的文档中，现在已更正，高度规则不再有效。 doctype 必须存在，因为它是必需的，也是为了解决 a jQuery issue I was having。

为什么 doctype 弄乱了我的 css？或者，可能更重要的是，为什么它事先有效？

Answer 1

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

因为古代浏览器有奇怪的、不一致的行为，并且浏览器将 Doctypes 视为智力测试，以查看作者是否按照标准或他们从 W3School 学到的知识编写代码十年前。

如果你有 height: 100% 并且 parent 元素的高度是 auto 那么 100% 表示 auto.

仅当 parent 元素具有 defined height 时，即不是 auto[=41= 的值].如果它有 100% 高度 ，则还必须定义父项的父项高度。这可能会一直持续到 html 根元素。

所以设置html和body元素的height到 100%，以及该元素的每个 祖先元素 您希望具有 100% 高度排在首位。

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

Answer 2

您也可以使用 vh 单元，具体取决于您需要支持的浏览器。所以：

#mydiv {
    min-height: 100vh
}

为什么 min-height:100% 自声明文档类型后不起作用？

Why does min-height:100% not work since declaring a doctype?

html

css

doctype