A jQuery snippet for making elements on your page full-screen. Update vars on line 8 & 9 to begin.

full-screen-me.js

/*
 * => FULL SCREEN
 * => Author: William <[email protected]>
 * ---------------------------------------------------------------------------*/
 
/*** Set these vars to the correct elements ***/

var fullScreenEl = '#fullScreenMe'; // This is the section/wrapper which should occupy the screen
var keepOnScreen = ['#keepOnScreen', '#wpadminbar', '.masthead']; // Siblings of FullScrenEl to keep on screen (i.e. header nav)

// That's all, stop editing!

var fullscreenStuff = function(element, minusEl) {
  var thisH, totalMinus=0, newHeight=0, windowH=jQuery(window).height();
  
  // Add up height of elements to remain on screen
  if (minusEl.length > 0) {
    for ( var i=0; i<minusEl.length; i++) {
      thisH = jQuery(minusEl[i]).outerHeight( true );
      totalMinus += thisH;
    }
  }

  // calculate height to make it full-screen
  newHeight = windowH - totalMinus;
  
  // don't run if content height is greater than window height
  if (jQuery(element).height() > newHeight) {
    jQuery(element).css('height', 'auto');
    return;
  }
  
  // make full screen
  jQuery(element).outerHeight(newHeight);
};

var activateFullscreen = function(fullScreenEl, keepOnScreen) {
  fullscreenStuff(fullScreenEl, keepOnScreen);
};
activateFullscreen();

// Re-calculate if window resized
window.onresize = function() {
  var doit;
  clearTimeout(doit);
  doit = setTimeout(function() {
    activateFullscreen();
  }, 100);
};