How do I write CSS for multiple divs that fill out the browser window?

Question

What I want is to have mutliple divs after one another, that each is the full width and height of the browser/viewport. When the browser is rezized, the divs should rezise accordingly.

I have succesfully managed to do this in FF and IE (just width: auto and 100% height on each div), but Safari & Chrome still doesn't get it. The weird thing is, i don't get what happening in those browsers. While the first div behaves as the way i want, the height gets bigger and bigger for each div, and absolut positioned elements whithin each div ends upp somewhere on the bottom of the page; it's a mess.

an example of what i am trying to do can be found here: http://konstfuck.se/test/

Answer 1

Odd behaviour... I suspect the problem is that the BODY element grows as the divs are sized, so as each one has it's 100% height assigned it grows - and the height of the next big is greater.

Try wrapping them all in a div, give that a 100% height and see if it corrects the problem.

<div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>

Answer 2

HTML

<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>

CSS

html, body {
    height: 100%;
}

div {
    height: 100%;
}

Test it here.

Note: Tested in FF and Chrome only.

Answer 3

1) You don't have a valid Doctype, so your page will be rendered in Quirks mode and, as Henri Sivonen wrote,

[i]n the Quirks mode the browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s. Different browsers implement different quirks. In Internet Explorer 6, 7 and 8, the Quirks mode is effectively frozen IE 5.5. In other browsers, the Quirks mode is a handful of deviations from the Almost Standards mode.

2) Add height: 100% to html and body. As the spec says:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

So, if you don't specify the height of the containing block, as is the case in your example, the height is set to auto.