Flexbox sticky footer

by James Long

HTML

<div class="structure">
    <header class="structure_head">header</header>
    <main class="structure_body">main</main>
    <footer class="structure_foot">footer</footer>
</div>

CSS

*,
*:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body,
.structure {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100vh;
}

/* Required for iPad 3 */
.structure_head {
    -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
            flex-shrink: 0;
}

.structure_body {
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  width: 100%;
}

/* Not required */
body { margin: 0; }
main { display: block; }
.structure_head { background-color: #F99; }
.structure_body { background-color: #9F9; }
.structure_foot { background-color: #99F; }