Full screen stripes design

Full screen stripes design

I'm trying to design a page with different 'stripes'. I would like the
first div to be full screen, then when the user clicks on a button it
scrolls down to an other div that is full screen to.
Here is a website as an example : http://timmytompkinsapp.com
A lot of websites are doing this, and I would like to know how.
And here is what I've done so far : http://jsfiddle.net/d7tdK/
My problem is that I don't know how to make the height of the two stripes
to match the height of the window.
My html :
<div class='first-stripe'>
<a href='#scroll'><button> Go down </button></a>
</div>
<div class='second-div' id='scroll'>
<div id='div1'></div>
<div id='div2'></div>
<div id='div3'></div>
<div id='div4'></div>
</div>
My css:
.first-stripe{
width: 100%;
height:500px;
background: yellow;
border-bottom: 10px solid black;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.second-div{
width: 100%;
height:500px;
}
#div1 {
width: 50%; height: 50%; float: left;
background: blue;
}
#div2 {
width: 50%; height: 50%; float: left;background: green;
}
#div3 {
width: 50%; height: 50%; float: left;background: black;
}
#div4 {
width: 50%; height: 50%; float: left;background: red;
}
My js :
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href");
$('html, body').animate({
scrollTop:$(the_id).offset().top
}, 'slow');
return false;
});
My guess is that I should use a script for that, but I don't know how.
Thank you for your help !