Page-High Resizable Containers

In certain projects that involved a presentation like webpage with storytelling elements, you need containers that always keep the same height as the window itself.
This effect can be achieved using "page-high resizable containers".

The Javascript library jQuery let's us to listen to the "resize" event of the browser window and calculate the height of the containers:

// execute code after the page has been loaded
$(function(){
  // the resize function
  function resize() {
    // set a new height for all elements with the class 'page'
    $('.page').css('height', $(window).height());
  }
  
  // register the event handler
  $(window).on('resize', resize);
 
  // calculate initial height
  resize();
});