cristinafsanz · August 23, 2019 10:15
diff --git a/sticky-footer-no-vh.css b/sticky-footer-no-vh.css
 /* In Microsoft Edge 44 there were space below the footer with the previous solution */

 html {
  display: flex;
  width: 100%;
  height: 100%;
 }
 
 body {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
 }

 header,
 footer {
  flex-shrink: 0;
 }

 main {
  flex: 1 0 auto;
 }
diff --git a/sticky-footer.css b/sticky-footer.css
 html {
  display: flex;
 }

 body {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
 }

 .header,
 .footer {
  flex-shrink: 0;
 }

 .content {
  flex-grow: 1;
 }
diff --git a/sticky-footer.html b/sticky-footer.html
 <html>
  <body>
    <div class="header"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </body>
 </html>
No results found