Auto adjust the padding at the top of the site to match the header height for fixed header bars. Also set a min-height for the main content area so the footer gets pushed to the bottom of the browser window if page is shorter.

auto-space.js

/*************************************************************************/
/* Auto-Sizing header, footer, hero caption text
/*************************************************************************/
// Page top padding based on height of the header
function autoHeaderHeight() {
  var header = document.getElementsByClassName("navbar-fixed-top")[0];
  var pageBody = document.getElementsByClassName("content-area")[0];
  if (header && pageBody){
    var headerHeight = header.clientHeight;
    pageBody.style.paddingTop = headerHeight + "px";
  }
}
window.addEventListener("resize", autoHeaderHeight);
window.addEventListener("load", autoHeaderHeight);
//  Auto Page Height for small pages
function autoPageHeight() {
  var footer = document.getElementsByClassName("site-footer")[0];
  var pageBody = document.getElementsByClassName("content-area")[0];
  if (footer && pageBody){
    var footerHeight = footer.clientHeight;
    var pageHeight = window.innerHeight - footerHeight;
    pageBody.style.minHeight = pageHeight + "px";
  }
}
window.addEventListener("resize", autoPageHeight);
window.addEventListener("load", autoPageHeight);
// Auto center the caption box vertically over the hero image
function centerCaption() {
  var hero = document.getElementsByClassName("center-hero")[0];
  var caption = document.getElementsByClassName("hero-caption")[0];
  if (hero && caption){
    var heroHeight = hero.clientHeight;
    var captionHeight = caption.clientHeight;
    var centerHeight = (heroHeight - captionHeight) / 2;
    caption.style.top = centerHeight + "px";
  } else if (caption) {
    caption.style.top = "0";
  }
}
window.addEventListener("resize", centerCaption);
window.addEventListener("load", centerCaption);