为什么 <!DOCTYPE html> 断裂高度：100％？

Question

This code works: 此代码有效：

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

and produces a 100% height textarea. 并产生100％高的textarea。

If we add <!DOCTYPE html> on top, it doesn't work anymore (the height isn't 100% anymore). 如果在顶部添加<!DOCTYPE html> ，它将不再起作用（高度不再是100％）。

Why? 为什么？ According to here , it seems that adding this DOCTYPE is making it HTML5. 根据这里，似乎添加此DOCTYPE使其成为HTML5。 Why would HTML5 break the height: 100%; HTML5为什么会破坏height: 100%; ? ？

Answer 1

When you use of <!DOCTYPE html> ,you are in standard mode and html and body have height equal his inside content,so you must use this code: 当您使用<!DOCTYPE html> ，您处于standard mode并且html和body height等于其内部内容的height ，因此必须使用以下代码：

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

but when you don't use of DOCTYPE you are in quirks mode and , html and body have default height equal 100% ,only use this code: 但是，当您不使用DOCTYPE您会处于quirks mode并且html和body默认height等于100% ，请仅使用以下代码：

#a {
   height:100%;
}

为什么 <!DOCTYPE html> 断裂高度：100％？

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-11-15 11:42:46

为什么 <!DOCTYPE html> 断裂高度：100％？

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-11-15 11:42:46

解决方案1
1 已采纳 2017-11-15 11:42:46