Why does break height: 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.

If we add <!DOCTYPE html> on top, it doesn't work anymore (the height isn't 100% anymore).

Why? According to here, it seems that adding this DOCTYPE is making it HTML5. Why would HTML5 break the height: 100%;?

height:100% is relative to parent element, and nothing is specified on the parent element (form) — Temani Afif, Nov 15 '17 at 11:12
Possible duplicate of ["Height=100%" is not working in html when using , How i can fix this?](https://stackoverflow.com/questions/1966300/height-100-is-not-working-in-html-when-using-doctype-how-i-can-fix-this) — sol, Nov 15 '17 at 11:15

Ehsan · Accepted Answer · 2017-11-15T11:59:06.520

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:

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:

#a {
   height:100%;
}

edited Nov 15 '17 at 11:59

answered Nov 15 '17 at 11:42

Ehsan

1 Answers1