Responsive full screen div (with vertical scroll following)

Question

I'm trying to create a full screen div, so it re sizes to the browser window height and width.

But then you can scroll vertically to a second div, which is also the size of your browser window.

I've seen lots of examples of this style but can't find any tutorials. Perhaps I have the wrong key words?

One nice example is http://www.guestd.com (except I don't need background images, and only want two divs).

Thanks.

Answer 1

With pure CSS you can do it super simple.

HTML

<div class='tile' id='a'>

</div>
<div class='tile' id='b'>

</div>

CSS

body,html {
  width: 100%;
  height: 100%;
}
.tile {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #eaeaea;
}
#a {
  background-color: #222;
}

will give you this