Question

What I want to do is setup multiple div’s that each contain the contents of an entire page. Each div should be centered in the viewport and fill it entirely. Each successive div should be evenly spaced vertically based on the variable height of the viewport. For example say I have a view of 800×600 then each div should be this size and stacked. So, if I scrolled down exactly 600px I would only see page 2 div, 1200px I’d only see page 3 div. I don’t have any code or example to share and my exhausted searches have turned up nothing of this sort. Is this possible with just css?

Answer 1

You simply have to give your html, body & divs a height: 100%;:

html, body {
    height: 100%;
}
div {
    height: 100%;
    margin-bottom: 5px;
}

http://jsfiddle.net/KMMjv/