2

(Everything is tested in the latest firefox.)

This html-code creates an almost screen-filling red box:

<html>
<head>
</head>
<body>
  <div style="height:100%;background-color:red;"></div>
</body>
</html>

But adding a doctype declaration disables relative heights and makes the div's height zero:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="height:100%;background-color:red;"></div>
</body>
</html>

Why is this? In particular, I don't get why browsers consider relative heights in a document without doctype, since they don't in explicit html ones.

Cedric Reichenbach
  • 8,970
  • 6
  • 54
  • 89
  • 1
    See: http://stackoverflow.com/questions/1997842/why-certain-doctype-declarations-cause-100-height-tables-and-divs-to-stop-worki Basically you have to set the HTML and BODY height as well. – reinder May 24 '13 at 12:22
  • 1
    possible duplicate of [ is messing up my CSS](http://stackoverflow.com/questions/13853484/doctype-html-is-messing-up-my-css) – JJJ May 24 '13 at 12:22

3 Answers3

4

A doctype enforces a certain set of standards for the browser. If a page does not include a doctype, browsers will usually use some kind of quirks or transitional mode, which is more lenient about markup mistakes (but is bad practice and may display items incorrectly).

Essentially, strictly speaking, you can't set that element to height 100% using that browser's set of standards. It'll try to predict what you wanted to do if you don't include a doctype or include a transitional one and adjust the page's styling accordingly.

BLaZuRE
  • 2,356
  • 2
  • 26
  • 43
  • 1
    No doctype means quirks mode, not transitional. Quirks is not more lenient either. Quirks is an incorrect implementation of the box model. Much more info here: http://hsivonen.iki.fi/doctype/ – Rob May 24 '13 at 12:31
  • @Rob Mostly true, but Quirks mode is actually more lenient about mistakes on some browsers. Colors without # and stuff. – Mr Lister May 24 '13 at 12:33
  • @MrLister - I just woke up so I'd have to think about that but I'm pretty sure that's still an implementation error and not quirks allowing something. – Rob May 24 '13 at 12:35
  • Ok, I see it now: `html` does not have an explicit height. Setting this recursively to all elements (`html`, `body`, `div`) makes it work in HTML 5 (see ralph.m's answer). – Cedric Reichenbach May 24 '13 at 13:57
3

You can do it this way: http://cdpn.io/aHlCd

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">

html, body {height: 100%; margin: 0; padding: 0;}
div {min-height: 100%; background: red;}

</style>

</head>
<body>

<div></div>

</body>
</html>

You can also just set height on the div rather than min-height.

ralph.m
  • 13,468
  • 3
  • 23
  • 30
0

The above is the answer to why, if you were looking for a fix, setting the position to absolute and applying top,right,left and bottom should do the trick:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div style="position: absolute;height:100%;background-color:red;bottom: 0;top: 0;right: 0;left: 0"></div>
</body>
</html>
Oli Fletcher
  • 309
  • 4
  • 15