Login/Register
Why does height 100% work when DOCTYPE is removed?
Asked Answered
Solved csshtmldoctypequirks-mode
P

5

32

This is the entire code:

<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
    <div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>

Nothing appears. But if I remove the first line (the doctype), all of the page is green as expected.

I have two questions:

  1. How do I make the div fill the page without removing that tag?
  2. Why does removing the doctype make it work?
Pate answered 25/8, 2015 at 21:10 Comment(0)
F
59

CSS height property, percentage values & DOCTYPE

The first part of your question asking how to apply a 100% height to your div has been answered several times by others. Essentially, declare a height on the root element:

html { height: 100%; }

A complete explanation can be found here:

The second part of your question has received much less attention. I'll try to answer that.

Why does removing the doctype make [the green background] work?

When you remove the DOCTYPE (document type declaration) the browser switches from standards mode to quirks mode.

In quirks mode, also known as compatibility mode, the browser simulates an old browser so it can parse old web pages – pages authored before the advent of web standards. A browser in quirks mode pretends to be IE4, IE5 and Navigator 4 so it can render old code as the author intended.

Here's how Wikipedia defines quirks mode:

In computing, quirks mode refers to a technique used by some web browsers for the sake of maintaining backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode.

Here's MDN's take:

In the old days of the web, pages were typically written in two versions: One for Netscape Navigator, and one for Microsoft Internet Explorer. When the web standards were made at W3C, browsers could not just start using them, as doing so would break most existing sites on the web. Browsers therefore introduced two modes to treat new standards compliant sites differently from old legacy sites.

Now, here's the specific reason why the height: 100% in your code works in quirks mode but not in standards mode:

In standards mode, if the parent element has a height: auto (no height defined), then the percentage heights of child elements will also be treated as height: auto (as per the spec).

This is why the answer to your first question is html { height: 100%; }.

For height: 100% to work in your div, you must set a height on parent elements (more details).

In quirks mode, however, if the parent element has a height: auto, then the percentage heights of child elements are measured relative to the viewport.

Here are three references covering this behavior:

TL;DR

Here's what developers need to know in a nutshell:

A browser in quirks mode will render web pages in a way that is unpredictable, unreliable and often undesirable. So always include a DOCTYPE for the document to render in standards mode.

Selecting the right DOCTYPE used to be an ambiguous and somewhat confusing process with many DOCTYPE versions to choose from. But today the process is as simple as ever. Just use:

<!DOCTYPE html>
Fortyniner answered 25/8, 2015 at 22:39 Comment(0)
B
11

You mean vertically? divs are block level elements and as such they do fill the parent horizontally by default.

In order for this to work, you need to also give the HTML tag a height of 100%.

html, body { height:100%; }

See here for a working sample:

http://jsfiddle.net/uhg0y9tm/1/

As stated by some of the others here, once you remove the first line (the HTML5 doctype), browsers will render the page in a different way and in that case, it's not necessary to give the HTML tag an explicit height of 100%.

Bedder answered 25/8, 2015 at 21:14 Comment(0)
D
6

With the HTML5 doctype you need to also set the height on the html element:

html {
    height:100%;
}
Defroster answered 25/8, 2015 at 21:14 Comment(0)
T
6

You will have to set the width and height of <html> and <body> tag to 100% as well because when you assign the width and height of the <div> to 100%, it means that you are assigning it the full width and height of its parent element, in this case the parent element of the <div> is <body> and the parent element of <body> is <html>.

Why does it works when I remove the <!DOCTYPE html> tag ?

Because when you remove the <!DOCTYPE html> tag, the browser renders the page in different manner, showing other results.

Toul answered 25/8, 2015 at 21:22 Comment(1)
Finally, an explanation that makes sense. If the html and body elements don't expand to cover the page, then neither will their contained elements. This is a good answer. – Requiescat
B
3

You would need to make your html and body tags height 100% to fill the page.

css:

html, body{
  height: 100%;
}
Burack answered 25/8, 2015 at 21:14 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.