HTML wild doctype

Question

So i got 2 files divCeption.html and styles.css with the following code :

body {
    margin: 0;
}

#d1 {
    background-color: #ff000a;
    height: 100%;
    width: 100%;
}

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <div id="d1"></div>
    </body>
</html>

This code works and it does what it is suposed to do: show a red screen on the screen.
Ok, problem comes here, notice the <!doctype html>missing at the start of the HTML. If i place the doctype at the start of the HTML the page will come blank... Can anyone explain me why that doctype is giving troubles?

On which browser did you try ? It is possible that by default, depending on the "rendering mode", the HTML and BODY elements do not have any height and width if not present. — krtek, Sep 17 '14 at 20:26
Possibly related: http://stackoverflow.com/questions/10871898/why-cant-i-make-my-div-100-height-if-i-use-an-html5-doctype-how-do-i-get-it-1 — Raibaz, Sep 17 '14 at 20:28
`width` and `height` sets using percentage won't work if their parent element has no dimensions defined. The percentage here is in relation to the element's parent. — emerson.marini, Sep 17 '14 at 20:29

score 2 · Accepted Answer · edited May 23 '17 at 12:12

I can reproduce your problem, and I have solved it by adding

html, body {
    height: 100%;
}

to my CSS code.

The reason for this, as discussed here, may be that when the browser is in standards mode the percentage height of an element depends on the height of its parent, and the relationship goes up to the html element; you can see it for yourself by inspecting the html element and noticing that it doesn't take up all the space on your screen.

Even better than adding the CSS lines above, you should use a CSS reset.

score 1 · Answer 2 · answered Sep 17 '14 at 20:30

1

Set

html, body {
    height: 100%;
}

answered Sep 17 '14 at 20:30

Etheryte

24,589
11
71
116

score 0 · Answer 3 · answered Sep 17 '14 at 20:30

Maybe you should try to set the height and width of the html and body element :

html, body {
  width: 100%;
  height: 100%;
}

body {
   margin: 0;
}

#d1 {
   background-color: #ff000a;
   height: 100%;
   width: 100%;
}

<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="styles.css">
   </head>
  
   <body>
      <div id="d1"></div>
   </body>
</html>

HTML wild doctype

3 Answers3