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...