JSFiddle - React, Tailwind, and code Playground

super cool sticky footer

by Jennifer Perrin

HTML

<header class="header">
  Sticky Footer using Calc()
</header>
<section class="main">
  <h1>Here’s your page content!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis molestias omnis iusto necessitatibus eveniet quaerat quam qui, hic, aut sequi alias blanditiis quo nesciunt incidunt libero laudantium corporis, quas cumque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam deleniti vitae neque illo quod, necessitatibus atque quidem itaque aliquid molestias cumque nesciunt odit vero veritatis obcaecati voluptatem totam expedita, asperiores.</p>
</section>
<footer class="footer">
  Here is the super cool “sticky” footer
</footer>

CSS

@import url(http://fonts.googleapis.com/css?family=Dosis);
* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  color: #444444;
  font-family:'Dosis';
}

.header, .main, .footer {
  padding: 12px;
}

.header {
  background: #4072b4;
  color: #ffffff;
  height: 60px;
  font-size: 2em;
}

.main {
  max-width: 800px;
  margin: 0 auto;
  /* 106px is the combined (total) height of the footer and header */
  min-height: calc(100% - 106px);
}

.footer {
  background: #4679bd;
  color: #ffffff;
  height: 46px;
}

JavaScript

/**
 * Browser support
 * 
 * calc() doesn’t work in IE8 or less. It falls back nicely though,
 * if calc isn’t supported then you just end up with the footer at
 * the bottom of the content. It just isn’t as pretty, which is
 * pretty par-for-the-course when it comes to IE8.
 **/