/** STICKY-FOOTER CSS
  *  these styles configure a "sticky" footer
  *
  *  "sticky" footers stick to the bottom of the window
  *  when there isn't much page content,
  *  but stick to the bottom of the page
  *  when the content is bigger than the window.
  *
  *  traditional "sticky" footers use padding or calc()
  *  which require knowledge of the heights of the
  *  header and footers.
  *  this isn't ideal, as responsive sites will usually
  *  change the heights of these elements
  *
  *  modern "sticky" footers use flex or grid
  *  to circumvent this issue.
  *  these solutions have poor support in IE.
  *
  *  this solution uses flex, but has full support
  *  for IE10 and IE11.
  **/

/* RESET */
body {
  margin: 0;
}

/* "sticky" footer */
html {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* avoids IE 10-11 `min-height` bug */
}
main {
  flex: 1 0 auto;
}
header, footer {
  flex-shrink: 0;
}

/* visuals */
header {
  background-color: #FF5722;
}
footer {
  background-color: #00BCD4;
}
header, main, footer {
  padding: 2em;
}