CODEWITHSUNDEEP
htmlcss
Alpha2k
Alpha2k

Reputation: 2241

HTML wild doctype

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?

Upvotes: 1

Views: 90

Answers (3)

Raibaz
Raibaz

Reputation: 9700

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.

Upvotes: 2

krtek
krtek

Reputation: 26597

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>

Upvotes: 0

Etheryte
Etheryte

Reputation: 25310

Set 

html, body {
    height: 100%;
}

Upvotes: 1

Related Questions