Defining The Fold: Layouts With jQuery

One of the biggest challenges in web design is making sure pages look exactly the way you want, no matter the size or shape of the user’s screen. Responsive design goes a long way toward making this easier, but sometimes it isn’t enough. When you want to make sure that your content fits a user’s screen exactly, it’s time to break out the jQuery.

Here’s the problem: Sometimes you want to use a big banner image or hero typography element, and you want it to exactly fit the height of the browser, and you want whatever other content is on the page to exist below it, below the fold. height: 100% doesn’t work because percentage-based heights only work relative to defined parent elements, and your parent element isn’t based on the window height.

Developers usually approach this problem either by making the banner image huge so that it will be at least as large as the window height, or by just accepting that some browsers will be taller than the fold and getting on with it. This is kind of like a magazine designer not know where the fold between front and back will be and accepting that some of the cover might wrap around to the back or some of the back advertisement might show up on the front cover. We can do better.

You could play around with vertical media queries, but you would have to define a great many of them. But unless you want to create an infinite number of media queries, they would only be rough approximations of where the fold might end up on various devices. But fear not! When vanilla CSS and HTML won’t do the trick, jQuery swoops in to the rescue.

Let’s say you have a basic structure that looks like this (Be sure to take a look at the html and css tabs):

See the Pen Undefined Fold Example by Josiah Spence (@spencejs) on CodePen

All we really have here is an upper area that we want to appear above the fold, and a lower area to appear below the fold. But of course, the height of the fold is not at all defined, so the upper div is only as tall as it needs to be to contain the content within.

You might think to try declaring height: 100% on the above-the-fold div, but doing so will have absolutely no effect because 100% height only references the window height if you are applying it to the rootelement. Otherwise it references to height of the parent container. So no love there.

Here’s where the jQuery comes in. Code first, then the explanation:

$(document).ready(function() {

    /*Set height of sections to window height*/
    $( "div" ).each(function(){
        var $this = $(this);
        $this.css({'min-height':($(window).height())+'px'});

        /*Recalculate on window resize*/
        $(window).resize(function(){
            $this.css({'min-height':($(window).height())+'px'});
        });
    });

});

First, we target the element we want to effect. In this demo, I simply targeted the divs and used an each function to run the code on all divs, thus making both the above-the-fold div and the below-the-fold div equal to the heght of the window. In production code, you probably wouldn’t want to target all the divs like this, but you could use another selector to target all the sections or divs with a particular class.
property
Next, all we do is take the targeted elements ($this) and add the CSS. The height of the browser window is determined with $(window).height(), and “+px” is appended to supply a valid unit of measure.

Also note that I opted to use the min-height property, instead of just height. This allows the div to grow taller than the browser height in cases where the content is too large to fit within the browser height without scrolling.

Finally, the $(window).resize function reapplies the sizing if the window is resized by the user.

Easy breasy – The height of each div is the height of the window! The final result looks like this:

See the Pen jQuery Defined Fold Example by Josiah Spence (@spencejs) on CodePen

When you are looking at the example above, note that I added box-sizing:border-box; to the CSS for the divs. This ensures that the padding stays within the defined height, rather than growing beyond it.

2 Responses to “Defining The Fold: Layouts With jQuery”

  1. Gary

    Is there a Vanilla Javascript version of this out there? I can’t find one!

    Reply

Leave a Reply