cyancey76 · September 22, 2017 20:59
diff --git a/sticky-footer.css b/sticky-footer.css
 html {
  height: 100%;
 }

 body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
 }

 .header {
  padding: 20px;
 }

 .content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
 }

 .footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
  padding: 20px;
 }
diff --git a/sticky-footer.html b/sticky-footer.html
 <body>
  <header class="header">
    <p>Yay, it's a header!</p>
  </header>
  
  <div class="content">
    <h1>Sticky Footer with Flexbox</h1>
    <p><button id="add">Add Content</button></p>
  </div>

  <footer class="footer">
    Footer 
  </footer>
 </body>