Vertical Pagination of Divs

What I want to do is setup multiple div开发者_JS百科'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 800x600 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?

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/

Because this would vary depending on the size of the user's browser window you would need to JavaScript to detect screen height and position them accordingly. Although you could set the height of each div with just CSS (height: 100%;) you would need to set the top with JS.

Here is a working JSBin: http://jsbin.com/ogokef/edit#preview

Use the following units: vh for viewport height vw for viewport width

html, body {
            height: 100vh;
           }
      div {
            height: 100vh;
            width: 100%; /* you can use 100vw too, but for height it must be vh */
          }