<div class="container">
  <header class="row" role="banner">
    <div class="inner-wrap">
      <h1>Header</h1>
    </div>
  </header>

  <main class="row" role="main">
    <section class="inner-wrap">
      <header>
        <h2>Sticky Footer Content</h2>
      </header>
      
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    </section>
  </main>

  <footer class="row" role="contentinfo">
    <div class="inner-wrap">
      <p><small>Footer©2015 footer inc.</small></p>
    </div>
  </footer>
</div>
html,
body,
.container {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.container {
  display: table;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  width: 100%;
}

.row {
  display: table-row;
  display: -moz-box; // FF42
}

.inner-wrap {
  padding-left: 20px;
  padding-right: 20px;
}


// ================================================
// Use These lines with appropriate vendor prefixes
// and conditional comments to support lte IE7. 

// 1. Contain floats and fix margin collapse issues.
// 2. Make container the full height and not collapse.

/* 1. */
/*.row {
  *zoom: 1;
}*/

/* 2 */
/*main[role="main"] {
  height: 100%;
}*/


// ================================================


header[role="banner"] {
  flex: none;
  height: 70px;
  background: #EF4B37;
  color: white;
}

main[role="main"] {
  flex: 1 0 auto;
  height: auto;
}

footer[role="contentinfo"] {
  flex: none;
  height: 40px;
  background: #FF9D3C;
  vertical-align: middle;
  align-items: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.