Adjust div height based on viewport

Did you ever wonder how some sites scale their intro or top homepage area to be the size of the entire screen? It certainly looks good on larger screens with background images or large images.

This is accomplished with some pretty easy javascript or jquery.

Below you’ll see a function that targeting a div with the ID ‘top-header’. Since that div is given a width of 100%, the height is the only thing we need to worry about.

This code will set the div height to whatever the height of your viewport window is on page load.

function viewport_height() {
      var window_height = $(window).height();
      $('#top-header').height(window_height);
}

viewport_height();

$(window).resize(function() {
  viewport_height();
});