tvanantwerp/bottom-aligned-footer-foundation-5.md

## bottom-aligned-footer-foundation-5.md

      
    Raw
  

              bottom-aligned-footer-foundation-5.md
            
          
    Bottom-Aligned Footer in Foundation 5 Pages

This CSS and jQuery will align a <footer> element to the bottom of a given HTML page when the content of the page does not fill the entire window height. This is designed around a page using Foundation 5 with an off-canvas menu.
Page content goes inside <div class="off-canvas-wrap">. If the contents of this element are not enough for its height to equal the window height, then the jQuery adds CSS classes to make the container elements' height equal 100% and the footer is positioned absolutely at the bottom of the page.

  
## index.html
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Footer Always at Bottom in Foundation 5</title>
    <link rel="stylesheet" href="css/app.css" />
    <script src="bower_components/modernizr/modernizr.js"></script>
  </head>
  <body>
    <div class="off-canvas-wrap" data-offcanvas>
      <div class="inner-wrap">

        <header>
          <nav class="tab-bar">
            <section class="left-small">
              <a href="" class="left-off-canvas-toggle menu-icon"><span></span></a>
            </section>
            <section class="middle tab-bar-section">Website Name</section>
          </nav>

          <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                  <li><a href="#">Menu Item 1</a></li>
                  <li><a href="#">Menu Item 2</a></li>
                </ul>
          </aside>

        </header>

        <section>
          <div class="row">
            <div class="small-12 columns">
              <p>Body Content</p>
            </div>
          </div>
        </section>

        <footer>
          <div class="row">
            <div class="small-12 columns"><p>Footer Content</p></div>
          </div>
        </footer>

        <a class="exit-off-canvas"></a>
      </div>
    </div>

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/foundation/js/foundation.min.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

## main.js
$(document).ready(function(){
  var height = $(window).height(),
      contentHeight = $(".off-canvas-wrap").height(),
      wrappers = ["html", "body", ".off-canvas-wrap", ".inner-wrap"];

  if (contentHeight < height ) {
    for (var i = 0, n = wrappers.length; i < n; i++) {
      $(wrappers[i]).addClass("full-height");
    }
    $("footer").addClass("sticky-footer");
  }
});

## style.css
.full-height {
  height: 100%;
}

.sticky-footer {
  bottom: 0;
  position: absolute;
  width: 100%;
}
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Footer Always at Bottom in Foundation 5</title>
	<link rel="stylesheet" href="css/app.css" />
	<script src="bower_components/modernizr/modernizr.js"></script>
	</head>
	<body>
	<div class="off-canvas-wrap" data-offcanvas>
	<div class="inner-wrap">

	<header>
	<nav class="tab-bar">
	<section class="left-small">
	<a href="" class="left-off-canvas-toggle menu-icon"><span></span></a>
	</section>
	<section class="middle tab-bar-section">Website Name</section>
	</nav>

	<aside class="left-off-canvas-menu">
	<ul class="off-canvas-list">
	<li><a href="#">Menu Item 1</a></li>
	<li><a href="#">Menu Item 2</a></li>
	</ul>
	</aside>

	</header>

	<section>
	<div class="row">
	<div class="small-12 columns">
	<p>Body Content</p>
	</div>
	</div>
	</section>

	<footer>
	<div class="row">
	<div class="small-12 columns"><p>Footer Content</p></div>
	</div>
	</footer>

	<a class="exit-off-canvas"></a>
	</div>
	</div>

	<script src="bower_components/jquery/dist/jquery.min.js"></script>
	<script src="bower_components/foundation/js/foundation.min.js"></script>
	<script src="js/app.js"></script>
	</body>
	</html>
	$(document).ready(function(){
	var height = $(window).height(),
	contentHeight = $(".off-canvas-wrap").height(),
	wrappers = ["html", "body", ".off-canvas-wrap", ".inner-wrap"];

	if (contentHeight < height ) {
	for (var i = 0, n = wrappers.length; i < n; i++) {
	$(wrappers[i]).addClass("full-height");
	}
	$("footer").addClass("sticky-footer");
	}
	});
	.full-height {
	height: 100%;
	}

	.sticky-footer {
	bottom: 0;
	position: absolute;
	width: 100%;
	}