Question

此代码有效：

<html>
  <head>
    <style>#a { height: 100%; }</style>
  </head>
  <body>
   <form>
     <textarea id="a"></textarea>
   </form>
  </body>
</html>

并产生100％高度的textarea。

如果我们在顶部添加<!DOCTYPE html>，它就不再起作用了（高度不再是100％）。

为什么？根据here，似乎添加此DOCTYPE会使其成为HTML5。为什么HTML5会破坏height: 100%;？

Answer 1

当您使用<!DOCTYPE html>时，您位于standard mode且html且body height等于其内部内容，因此您必须使用此代码：

html, body, form, #a {
   height:100%;
}

但是当您不使用DOCTYPE时，quirks mode位于html，而body和height的默认100%相等{{1}只使用此代码：

#a {
   height:100%;
}