About this snippet

Keep your footer at the bottom of the page, even if the content is short. We use Flexbox to push the footer down, so your layout always looks full and complete regardless of the page length.

Size
709 bytes
Uses
HTML, CSS
Loads
Nothing external
Views
320

Collections

Related snippets

<div class="page-wrapper">
  <header class="site-header">Header</header>
  <main class="site-content">
    <h1>Page Content</h1>
    <p>This content is short, but the footer stays at the bottom.</p>
  </main>
  <footer class="site-footer">Footer Content</footer>
</div>
html, body {
  margin: 0;
  height: 100%;
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.site-header {
  background: #1f2937;
  color: white;
  padding: 20px;
}
.site-content {
  flex: 1;
  padding: 40px;
  background: #f9fafb;
}
.site-footer {
  background: #374151;
  color: #d1d5db;
  padding: 20px;
  text-align: center;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save