Start with the beginning: we need to set the height of the row to equal the height of your viewport. Each row will then take up the height of the screen so that we can scroll through them in a deep-dive fashion. So we want to get the body element and, on load, run a function. The first operation is to get the row elements, which we will do by obtaining the elements by the row class name, loop through them, add the height style to each one, set to the window's innerHeight property, and add the string px to it. And then, the only thing that needs to be done is to add an id attribute called body to the BODY element. Look at this example:

document.getElementById("body").onload = function() {
        for ( i = 0; i < document.getElementsByClassName("row").length; i++) {
            document.getElementsByClassName("row")[i].style.height = window.innerHeight + "px";
        }
}

Now, refresh your browser window, and you will see some magic happen. It's still a big blue blob, but it's a very long big blue blob. Look at the following screen grab: