Question

我有一个div类.app，它有以下css规则：

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

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

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

为什么doctype弄乱了我的CSS？或者，可能更重要的是，为什么它事先工作？

Answer 1

当您删除文档类型时，浏览器会进入怪癖模式，这样会有所不同，以帮助未经验证的旧代码正确渲染。

因为古老的浏览器具有奇怪的，不一致的行为，并且浏览器将Doctypes视为智力测试，以查看作者是否正在编写标准代码或者他们在十年前从W3Schools学到的内容。

如果身高：100％且父元素的高度为自动，则 100％表示自动。

仅当父元素具有定义的高度时，即不是 auto 的值。如果 100％高度，则也必须定义父级的父级高度。这可以直到html根元素。

因此，将 html 和 body 元素的高度设置为 100％，以及每个您希望首先拥有 100％高度的元素的单个祖先元素。

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

#mydiv {
    height: 100%;
}

Answer 2

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

#mydiv {
    min-height: 100vh
}