O'Reilly logo

Web Design Blueprints by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Setting the row height

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required