ricardodantas · March 12, 2021 09:05
diff --git a/footer-always-at-the-bottom.css b/footer-always-at-the-bottom.css
 body {
  padding: 0;
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
 }

 .header {
  background-color: red;
  height:  100px;
 }

 .main {
  background-color: white;
  height: 100%;
  flex-grow: 1;
 }

 .footer {
  background-color: black;
  height: 120px;
 }

 .content-box {
  margin: 10px;
  padding: 20px 10px;
 }
diff --git a/footer-always-at-the-bottom.html b/footer-always-at-the-bottom.html
 <html>
  <body>
    <div class="header">header content</div>
    <div class="main">
      <div class="content-box"></div>
      <div class="content-box"></div>
      <div class="content-box"></div>
    </div>
    <div class="footer">footer content</div>
  </body> 
 </html>