Home/ Questions/Q 7009957
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:55:44+00:00

When I do <html> <head> </head> <body> <div style=width:100%;height:100%;background:blue;></div> </body> </html> the div fills

  • 0

When I do

<html>
   <head>
   </head>
   <body>
     <div style="width:100%;height:100%;background:blue;"></div>
   </body>
</html>

the div fills the window

but if i add a doctype tag at the beginning

<!DOCTYPE HTML>
<html>
   <head>
   </head>
   <body>
     <div style="width:100%;height:100%;background:blue;"></div>
   </body>
</html>

the div fills the width, but doesn’t fill the height.

Any idea what’s going on? I know I’m supposed to put doctype tags, I’m just wondering specifically it’s doing in this case thats causing the different behavior.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Lack of doctype declaration triggers “quirks mode,” which means that browsers do different things to cope with the document, assuming it to be legacy code that may rely on features that existed in old browsers. Roughly speaking, “quirks mode” means that browser try to behave more or less like Internet Explorer 4. But they do it in different ways; I’ve composed an incomplete list of what happens in “quirks mode.” “Quirks mode” should only be used for legacy pages that need it; conversely, pages that work in “quirks mode” may fall apart in “standards mode,” and you get there just by adding a doctype declaration.

    In your case, skipping the theory part here, you need to add some rules to make the div element fill the canvas in “standards mode”:

    <style>
  head, body { height: 100%; margin: 0; padding: 0;}
</style>

    and

    <div style="width:100%;height:100%;background:blue; position: absolute;"></div>
    • 0