// Make the most of the screen / window height..
$(document).ready(function() {

  resizeContent = function() {
    // How much space do our fixed-sized elements take?
    var $athlete_element = $('.row.athlete');
    var $footer_nav_element = $('.navbar.navbar-fixed-bottom');

    var fixed_content_height =
      $athlete_element.offset().top
      + $athlete_element.outerHeight()
      + $footer_nav_element.outerHeight()
      + 10;   // margin

    // Set the content height. CSS min-height handles small and negative values
    //  resulting from this calculation
    var content_height = ($(window).height() - fixed_content_height);
    $('.nano').height(content_height);
  };

  // Trigger our resize event..
  resizeContent();

  // ..then bind our function to the Window Resize Event..
  $(window).resize(function() { resizeContent(); });

});
