web2ls · July 5, 2017 09:07
diff --git a/Sticky Footer b/Sticky Footer
 //Flexbox case 
 ===============
 HTML
 ===============
 <body>
  <header></header>
  <section class="content"></section>
  <footer></footer>
 </body>

 ===============
 CSS
 ===============
 html { height: 100%; }
 body {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
 }
 header {
  flex: 0 0 auto;
 }
 .content {
  flex: 1 0 auto;
 }
 footer {
  flex: 0 0 auto;
 }



 //Native case 
 ===============
 HTML
 ===============
 <body>
  <div class="wrap">
    <header></header>
    <section class="content"></section>
  </div>
  
  <footer></footer>
 </body>

 ===============
 CSS
 ===============
 html, body {
  width: 100%;
  height: 100%;
 }
 .wrap {
  min-height: 100%;
  margin-bottom: -50px;
  padding-bottom: 50px;
 }
 header {
  height: 50px;
  background: #333;
 }
 .content {
  //something else
 }
 footer {
  height: 50px;
  background: #333;
 }



 //Pseudo elements ':after' case 
 ===============
 HTML
 ===============
 <body>
  <div class="wrap">
    <header></header>
    <section class="content"></section>
  </div>
  
  <footer></footer>
 </body>

 ===============
 CSS
 ===============
 html, body {
  width: 100%;
  height: 100%;
 }
 .wrap {
  min-height: 100%;
  margin-bottom: -50px;
 }
 .wrap:after {
  content: '';
  display: block;
  height: 50px;
 }
 header {
  height: 50px;
  background: #333;
 }
 .content {
  //something else
 }
 footer {
  height: 50px;
  background: #333;
 }
No results found