Sticky Footer 📌

Create footers that always stick to the bottom of the page, whether you have little content or lots of it.

What is a Sticky Footer?

A sticky footer is a footer that always appears at the bottom of the viewport when the page content is short, but moves down naturally when the content is longer than the viewport. It solves the common problem of footers "floating" in the middle of the page when there's not enough content.

🎯 Perfect Placement

Footer always at bottom regardless of content

📱 Responsive

Works on all devices and screen sizes

⚡ Modern CSS

Easy with Flexbox and CSS Grid

Flexbox Sticky Footer

Key Concept:

  • Set body to display: flex; flex-direction: column; min-height: 100vh;
  • Use margin-top: auto on the footer
  • Main content uses flex: 1 to grow and fill space
  • Works in all modern browsers

Flexbox Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Sticky Footer</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    
    /* Header */
    .header {
      background: linear-gradient(135deg, #2c3e50, #34495e);
      color: white;
      padding: 2rem 0;
      text-align: center;
    }
    
    .header h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }
    
    /* Main Content */
    .main-content {
      flex: 1;
      padding: 3rem 0;
      background: white;
    }
    
    .content-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .content-card {
      background: #f8f9fa;
      padding: 2rem;
      border-radius: 12px;
      border-left: 4px solid #667eea;
    }
    
    /* Sticky Footer */
    .footer {
      background: linear-gradient(135deg, #34495e, #2c3e50);
      color: white;
      padding: 2rem 0;
      text-align: center;
      margin-top: auto; /* This makes it sticky! */
    }
    
    .footer-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    
    .footer-links {
      display: flex;
      gap: 2rem;
    }
    
    .footer-links a {
      color: #ecf0f1;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .footer-links a:hover {
      color: #3498db;
    }
    
    .demo-controls {
      background: rgba(255, 255, 255, 0.1);
      padding: 1rem;
      border-radius: 8px;
      margin-top: 1rem;
    }
    
    button {
      background: #3498db;
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      cursor: pointer;
      margin: 0 0.5rem;
    }
    
    /* Content height toggle for demo */
    .short-content .main-content {
      min-height: 200px;
    }
    
    .tall-content .main-content {
      min-height: 1200px;
    }
  </style>
</head>
<body class="short-content">
  <div class="demo-controls" style="position: fixed; top: 20px; right: 20px; z-index: 1000;">
    <button onclick="document.body.className='short-content'">Short Content</button>
    <button onclick="document.body.className='tall-content'">Tall Content</button>
    <button onclick="document.body.className=''">Normal Content</button>
  </div>

  <!-- Header -->
  <header class="header">
    <div class="container">
      <h1>📌 Flexbox Sticky Footer</h1>
      <p>The footer stays at the bottom regardless of content height</p>
    </div>
  </header>

  <!-- Main Content -->
  <main class="main-content">
    <div class="container">
      <div class="content-card">
        <h2>How It Works</h2>
        <p>This sticky footer uses Flexbox with <code>margin-top: auto</code> on the footer element. The key is setting the body to <code>display: flex</code> and <code>flex-direction: column</code> with <code>min-height: 100vh</code>.</p>
      </div>
      
      <div class="content-grid">
        <div class="content-card">
          <h3>🚀 Key Feature</h3>
          <p>Footer sticks to bottom when content is short</p>
        </div>
        <div class="content-card">
          <h3>📱 Responsive</h3>
          <p>Works perfectly on all screen sizes</p>
        </div>
        <div class="content-card">
          <h3>⚡ Simple</h3>
          <p>Just a few lines of CSS</p>
        </div>
      </div>
      
      <div class="content-card">
        <h3>Try It Out!</h3>
        <p>Use the buttons in the top-right corner to change the content height and see how the footer always stays at the bottom of the viewport.</p>
        <p>With short content: Footer sticks to bottom</p>
        <p>With tall content: Footer moves down naturally</p>
      </div>
    </div>
  </main>

  <!-- Sticky Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-info">
          <p>&copy; 2024 Sticky Footer Demo. Built with Flexbox.</p>
        </div>
        <div class="footer-links">
          <a href="#privacy">Privacy Policy</a>
          <a href="#terms">Terms of Service</a>
          <a href="#contact">Contact</a>
        </div>
      </div>
      <div class="demo-controls">
        <p><strong>CSS Magic:</strong> <code>body { display: flex; flex-direction: column; min-height: 100vh; }</code></p>
        <p><code>.footer { margin-top: auto; }</code></p>
      </div>
    </div>
  </footer>
</body>
</html>

CSS Grid Sticky Footer

Grid Template Rows

Use grid-template-rows: auto 1fr auto to create three rows where the middle row takes all available space.

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Clean and Semantic

CSS Grid provides a clean, semantic way to define your layout structure without extra HTML elements.

/* Auto: header height */
/* 1fr: main content */
/* Auto: footer height */

CSS Grid Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Grid Sticky Footer</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      min-height: 100vh;
      display: grid;
      grid-template-rows: auto 1fr auto; /* This is the magic! */
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    
    /* Header */
    .header {
      background: linear-gradient(135deg, #e44d26, #f16529);
      color: white;
      padding: 2rem 0;
      text-align: center;
    }
    
    .header h1 {
      font-size: 2.5rem;
      margin-bottom: 0.5rem;
    }
    
    /* Main Content */
    .main-content {
      padding: 3rem 0;
      background: white;
    }
    
    .content-steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .step {
      background: #f8f9fa;
      padding: 2rem;
      border-radius: 12px;
      text-align: center;
      position: relative;
    }
    
    .step-number {
      position: absolute;
      top: -15px;
      left: 50%;
      transform: translateX(-50%);
      background: #e44d26;
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
    }
    
    /* Sticky Footer */
    .footer {
      background: linear-gradient(135deg, #2c3e50, #34495e);
      color: white;
      padding: 2rem 0;
    }
    
    .footer-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 2rem;
      text-align: center;
    }
    
    .footer-section h3 {
      color: #3498db;
      margin-bottom: 1rem;
    }
    
    .footer-section a {
      color: #ecf0f1;
      text-decoration: none;
      display: block;
      margin: 0.5rem 0;
      transition: color 0.3s;
    }
    
    .footer-section a:hover {
      color: #3498db;
    }
    
    .code-demo {
      background: #2c3e50;
      color: #3498db;
      padding: 1rem;
      border-radius: 8px;
      margin-top: 1rem;
      font-family: monospace;
    }
    
    /* Content height variations */
    .short-content .main-content {
      min-height: 200px;
    }
    
    .tall-content .main-content {
      min-height: 1000px;
    }
    
    .height-indicator {
      position: fixed;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      padding: 1rem;
      border-radius: 8px;
      z-index: 1000;
    }
  </style>
</head>
<body class="short-content">
  <div class="height-indicator">
    <div>Content Height: <span id="heightValue">Short</span></div>
    <button onclick="setContentHeight('short')">Short</button>
    <button onclick="setContentHeight('normal')">Normal</button>
    <button onclick="setContentHeight('tall')">Tall</button>
  </div>

  <!-- Header -->
  <header class="header">
    <div class="container">
      <h1>🎯 CSS Grid Sticky Footer</h1>
      <p>Using CSS Grid template rows for perfect footer placement</p>
    </div>
  </header>

  <!-- Main Content -->
  <main class="main-content">
    <div class="container">
      <div class="step">
        <div class="step-number">1</div>
        <h3>Grid Template Rows</h3>
        <p>The body uses <code>grid-template-rows: auto 1fr auto</code> to create three rows: header, main content, and footer.</p>
      </div>
      
      <div class="content-steps">
        <div class="step">
          <div class="step-number">2</div>
          <h3>Auto Height Header</h3>
          <p>First row (header) takes only the space it needs</p>
        </div>
        <div class="step">
          <div class="step-number">3</div>
          <h3>Flexible Main Content</h3>
          <p>Second row (main) uses <code>1fr</code> to take all available space</p>
        </div>
        <div class="step">
          <div class="step-number">4</div>
          <h3>Auto Height Footer</h3>
          <p>Third row (footer) sticks to the bottom automatically</p>
        </div>
      </div>
      
      <div class="code-demo">
        <div>body {</div>
        <div>&nbsp;&nbsp;display: grid;</div>
        <div>&nbsp;&nbsp;grid-template-rows: auto 1fr auto;</div>
        <div>&nbsp;&nbsp;min-height: 100vh;</div>
        <div>}</div>
      </div>
    </div>
  </main>

  <!-- Sticky Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-section">
          <h3>Quick Links</h3>
          <a href="#home">Home</a>
          <a href="#about">About</a>
          <a href="#services">Services</a>
        </div>
        <div class="footer-section">
          <h3>Resources</h3>
          <a href="#docs">Documentation</a>
          <a href="#tutorials">Tutorials</a>
          <a href="#support">Support</a>
        </div>
        <div class="footer-section">
          <h3>Connect</h3>
          <a href="#twitter">Twitter</a>
          <a href="#github">GitHub</a>
          <a href="#linkedin">LinkedIn</a>
        </div>
      </div>
      <div style="text-align: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #34495e;">
        <p>&copy; 2024 Grid Sticky Footer. Perfect footer placement with CSS Grid.</p>
      </div>
    </div>
  </footer>

  <script>
    function setContentHeight(type) {
      document.body.className = type + '-content';
      document.getElementById('heightValue').textContent = type.charAt(0).toUpperCase() + type.slice(1);
    }
  </script>
</body>
</html>

Modern Sticky Footer

Enhanced Features

Modern sticky footers include additional features like newsletter signups, social media links, and responsive design patterns that work seamlessly with the sticky behavior.

/* Modern features include */
• Responsive grid layouts
• Social media integration
• Newsletter signup forms
• Hover effects and animations

Modern Implementation

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Modern Sticky Footer</title>
  <style>
    :root {
      --primary: #6366f1;
      --secondary: #8b5cf6;
      --accent: #06b6d4;
      --dark: #1e293b;
      --light: #f8fafc;
      --text: #334155;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      color: var(--text);
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    
    /* Modern Header */
    .header {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      padding: 1.5rem 0;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      font-size: 1.8rem;
      font-weight: bold;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .nav {
      display: flex;
      gap: 2rem;
    }
    
    .nav a {
      text-decoration: none;
      color: var(--text);
      font-weight: 500;
      transition: color 0.3s;
    }
    
    .nav a:hover {
      color: var(--primary);
    }
    
    /* Main Content */
    .main-content {
      flex: 1;
      padding: 4rem 0;
      background: white;
    }
    
    .hero {
      text-align: center;
      margin-bottom: 4rem;
    }
    
    .hero h1 {
      font-size: 3rem;
      margin-bottom: 1rem;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    
    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 3rem 0;
    }
    
    .feature-card {
      background: var(--light);
      padding: 2rem;
      border-radius: 16px;
      text-align: center;
      transition: transform 0.3s, box-shadow 0.3s;
      border: 1px solid #e2e8f0;
    }
    
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    
    .feature-icon {
      font-size: 3rem;
      margin-bottom: 1rem;
    }
    
    /* Modern Sticky Footer */
    .footer {
      background: var(--dark);
      color: white;
      padding: 3rem 0 1rem;
      margin-top: auto;
    }
    
    .footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 3rem;
      margin-bottom: 2rem;
    }
    
    .footer-section h3 {
      color: var(--accent);
      margin-bottom: 1rem;
      font-size: 1.2rem;
    }
    
    .footer-links {
      list-style: none;
    }
    
    .footer-links li {
      margin-bottom: 0.5rem;
    }
    
    .footer-links a {
      color: #cbd5e1;
      text-decoration: none;
      transition: color 0.3s;
    }
    
    .footer-links a:hover {
      color: var(--accent);
    }
    
    .social-links {
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    }
    
    .social-links a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      color: white;
      text-decoration: none;
      transition: all 0.3s;
    }
    
    .social-links a:hover {
      background: var(--accent);
      transform: translateY(-2px);
    }
    
    .footer-bottom {
      text-align: center;
      padding-top: 2rem;
      border-top: 1px solid #374151;
      color: #9ca3af;
    }
    
    /* Demo Controls */
    .demo-panel {
      position: fixed;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.9);
      color: white;
      padding: 1rem;
      border-radius: 12px;
      z-index: 1000;
    }
    
    .demo-panel button {
      background: var(--primary);
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 6px;
      cursor: pointer;
      margin: 0.2rem;
      transition: background 0.3s;
    }
    
    .demo-panel button:hover {
      background: var(--secondary);
    }
  </style>
</head>
<body>
  <div class="demo-panel">
    <div style="margin-bottom: 0.5rem;">Content Height:</div>
    <button onclick="adjustContent('short')">Short</button>
    <button onclick="adjustContent('medium')">Medium</button>
    <button onclick="adjustContent('long')">Long</button>
  </div>

  <!-- Header -->
  <header class="header">
    <div class="container">
      <div class="header-content">
        <div class="logo">🚀 ModernFooter</div>
        <nav class="nav">
          <a href="#home">Home</a>
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
          <a href="#about">About</a>
          <a href="#contact">Contact</a>
        </nav>
      </div>
    </div>
  </header>

  <!-- Main Content -->
  <main class="main-content" id="mainContent">
    <div class="container">
      <div class="hero">
        <h1>Modern Sticky Footer</h1>
        <p style="font-size: 1.2rem; color: var(--text); max-width: 600px; margin: 0 auto;">
          A beautifully designed sticky footer that always stays at the bottom, featuring modern CSS techniques and responsive design.
        </p>
      </div>
      
      <div class="features">
        <div class="feature-card">
          <div class="feature-icon">🎯</div>
          <h3>Always Visible</h3>
          <p>Footer stays at the bottom regardless of content length</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📱</div>
          <h3>Fully Responsive</h3>
          <p>Perfect on desktop, tablet, and mobile devices</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">⚡</div>
          <h3>Lightning Fast</h3>
          <p>Built with modern CSS for optimal performance</p>
        </div>
      </div>
      
      <div style="text-align: center; margin-top: 3rem;">
        <p>Try adjusting the content height using the controls in the top-right corner to see the sticky footer in action!</p>
      </div>
    </div>
  </main>

  <!-- Modern Sticky Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-section">
          <h3>Company</h3>
          <ul class="footer-links">
            <li><a href="#about">About Us</a></li>
            <li><a href="#careers">Careers</a></li>
            <li><a href="#press">Press</a></li>
            <li><a href="#blog">Blog</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h3>Products</h3>
          <ul class="footer-links">
            <li><a href="#features">Features</a></li>
            <li><a href="#pricing">Pricing</a></li>
            <li><a href="#api">API</a></li>
            <li><a href="#integrations">Integrations</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h3>Support</h3>
          <ul class="footer-links">
            <li><a href="#help">Help Center</a></li>
            <li><a href="#contact">Contact Us</a></li>
            <li><a href="#status">Status</a></li>
            <li><a href="#community">Community</a></li>
          </ul>
        </div>
        
        <div class="footer-section">
          <h3>Connect</h3>
          <p>Follow us on social media for updates and news.</p>
          <div class="social-links">
            <a href="#twitter" title="Twitter">🐦</a>
            <a href="#github" title="GitHub">💻</a>
            <a href="#linkedin" title="LinkedIn">💼</a>
            <a href="#instagram" title="Instagram">📸</a>
          </div>
        </div>
      </div>
      
      <div class="footer-bottom">
        <p>&copy; 2024 Modern Sticky Footer. All rights reserved. | Designed with 💙 using Flexbox</p>
      </div>
    </div>
  </footer>

  <script>
    function adjustContent(size) {
      const main = document.getElementById('mainContent');
      const sizes = {
        short: '200px',
        medium: '600px',
        long: '1200px'
      };
      main.style.minHeight = sizes[size];
    }
  </script>
</body>
</html>

Advanced Techniques & Comparison

🔧 Multiple Methods

Compare different approaches and choose the best for your project

🚫 Common Pitfalls

Avoid common mistakes that break sticky footer behavior

Advanced Techniques

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced Sticky Footer Techniques</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1rem;
    }
    
    /* Header */
    .header {
      background: rgba(255, 255, 255, 0.95);
      padding: 2rem 0;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    /* Main Content */
    .main-content {
      flex: 1;
      padding: 3rem 0;
      background: white;
    }
    
    .techniques {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .technique {
      background: #f8f9fa;
      padding: 2rem;
      border-radius: 12px;
      border: 2px solid transparent;
      transition: all 0.3s;
    }
    
    .technique:hover {
      border-color: #667eea;
      transform: translateY(-2px);
    }
    
    .technique h3 {
      color: #2c3e50;
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    
    .code-block {
      background: #2c3e50;
      color: #ecf0f1;
      padding: 1rem;
      border-radius: 8px;
      margin: 1rem 0;
      font-family: monospace;
      font-size: 0.9rem;
      overflow-x: auto;
    }
    
    /* Advanced Footer */
    .footer {
      background: linear-gradient(135deg, #2c3e50, #34495e);
      color: white;
      padding: 2rem 0;
      margin-top: auto;
      position: relative;
      overflow: hidden;
    }
    
    .footer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
    }
    
    .footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
    }
    
    .newsletter {
      background: rgba(255, 255, 255, 0.1);
      padding: 1.5rem;
      border-radius: 8px;
      margin-top: 1rem;
    }
    
    .newsletter input {
      width: 100%;
      padding: 0.8rem;
      border: none;
      border-radius: 4px;
      margin-bottom: 0.5rem;
    }
    
    .newsletter button {
      width: 100%;
      padding: 0.8rem;
      background: #667eea;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: background 0.3s;
    }
    
    .newsletter button:hover {
      background: #764ba2;
    }
    
    /* Demo Section */
    .demo-section {
      background: #e3f2fd;
      padding: 2rem;
      border-radius: 12px;
      margin: 2rem 0;
      border-left: 4px solid #2196f3;
    }
    
    .comparison {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      margin: 2rem 0;
    }
    
    @media (max-width: 768px) {
      .comparison {
        grid-template-columns: 1fr;
      }
    }
    
    .height-controls {
      position: fixed;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.9);
      color: white;
      padding: 1rem;
      border-radius: 8px;
      z-index: 1000;
    }
  </style>
</head>
<body>
  <div class="height-controls">
    <div style="margin-bottom: 0.5rem;">Demo Controls:</div>
    <button onclick="setContent('short')" style="background: #4CAF50; color: white; border: none; padding: 0.5rem; margin: 0.2rem; border-radius: 4px; cursor: pointer;">Short Content</button>
    <button onclick="setContent('tall')" style="background: #2196F3; color: white; border: none; padding: 0.5rem; margin: 0.2rem; border-radius: 4px; cursor: pointer;">Tall Content</button>
  </div>

  <!-- Header -->
  <header class="header">
    <div class="container">
      <h1>🔧 Advanced Sticky Footer Techniques</h1>
      <p>Beyond the basics: creative implementations and edge cases</p>
    </div>
  </header>

  <!-- Main Content -->
  <main class="main-content" id="contentArea">
    <div class="container">
      <div class="demo-section">
        <h2>🎯 Multiple Sticky Footer Approaches</h2>
        <p>Different methods to achieve the same result, each with their own advantages.</p>
      </div>
      
      <div class="techniques">
        <div class="technique">
          <h3>📐 Method 1: Flexbox with margin-top: auto</h3>
          <div class="code-block">
            body {<br>
            &nbsp;&nbsp;display: flex;<br>
            &nbsp;&nbsp;flex-direction: column;<br>
            &nbsp;&nbsp;min-height: 100vh;<br>
            }<br><br>
            .footer {<br>
            &nbsp;&nbsp;margin-top: auto;<br>
            }
          </div>
          <p><strong>Pros:</strong> Simple, widely supported, flexible</p>
          <p><strong>Cons:</strong> Requires flexbox support</p>
        </div>
        
        <div class="technique">
          <h3>🔲 Method 2: CSS Grid</h3>
          <div class="code-block">
            body {<br>
            &nbsp;&nbsp;display: grid;<br>
            &nbsp;&nbsp;grid-template-rows: auto 1fr auto;<br>
            &nbsp;&nbsp;min-height: 100vh;<br>
            }
          </div>
          <p><strong>Pros:</strong> Clean, modern, great for complex layouts</p>
          <p><strong>Cons:</strong> Less browser support than flexbox</p>
        </div>
        
        <div class="technique">
          <h3>⚡ Method 3: Calc() Function</h3>
          <div class="code-block">
            .main {<br>
            &nbsp;&nbsp;min-height: calc(100vh - headerHeight - footerHeight);<br>
            }
          </div>
          <p><strong>Pros:</strong> Works without flexbox/grid</p>
          <p><strong>Cons:</strong> Requires knowing exact heights</p>
        </div>
        
        <div class="technique">
          <h3>🎨 Method 4: Viewport Units</h3>
          <div class="code-block">
            .wrapper {<br>
            &nbsp;&nbsp;min-height: 100vh;<br>
            &nbsp;&nbsp;display: flex;<br>
            &nbsp;&nbsp;flex-direction: column;<br>
            }<br><br>
            .content {<br>
            &nbsp;&nbsp;flex: 1;<br>
            }
          </div>
          <p><strong>Pros:</strong> Very reliable, good browser support</p>
          <p><strong>Cons:</strong> Requires wrapper element</p>
        </div>
      </div>
      
      <div class="comparison">
        <div>
          <h3>✅ When to Use Each Method</h3>
          <ul style="list-style: none; padding: 1rem; background: #f8f9fa; border-radius: 8px;">
            <li style="padding: 0.5rem; border-bottom: 1px solid #dee2e6;">• Flexbox: Most projects, good browser support</li>
            <li style="padding: 0.5rem; border-bottom: 1px solid #dee2e6;">• CSS Grid: Modern apps, complex layouts</li>
            <li style="padding: 0.5rem; border-bottom: 1px solid #dee2e6;">• Calc(): Simple sites, no flexbox needed</li>
            <li style="padding: 0.5rem;">• Viewport Units: Maximum compatibility</li>
          </ul>
        </div>
        
        <div>
          <h3>🚫 Common Pitfalls</h3>
          <ul style="list-style: none; padding: 1rem; background: #f8f9fa; border-radius: 8px;">
            <li style="padding: 0.5rem; border-bottom: 1px solid #dee2e6;">• Forgetting to set min-height on body</li>
            <li style="padding: 0.5rem; border-bottom: 1px solid #dee2e6;">• Not testing with different content heights</li>
            <li style="padding: 0.5rem; border-bottom: 1px solid #dee2e6;">• Ignoring mobile responsiveness</li>
            <li style="padding: 0.5rem;">• Overlooking browser compatibility</li>
          </ul>
        </div>
      </div>
    </div>
  </main>

  <!-- Advanced Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div>
          <h3>Advanced Footer Features</h3>
          <p>This footer includes gradients, hover effects, and a newsletter signup form.</p>
          <div class="newsletter">
            <h4>📧 Stay Updated</h4>
            <input type="email" placeholder="Enter your email">
            <button>Subscribe</button>
          </div>
        </div>
        
        <div>
          <h3>Technical Details</h3>
          <p>This implementation uses Flexbox with <code>margin-top: auto</code> and includes a gradient top border for visual appeal.</p>
          <p>The footer is fully responsive and works with any content height.</p>
        </div>
      </div>
      
      <div style="text-align: center; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #34495e;">
        <p>&copy; 2024 Advanced Sticky Footer Techniques. Master the art of footer placement!</p>
      </div>
    </div>
  </footer>

  <script>
    function setContent(type) {
      const content = document.getElementById('contentArea');
      if (type === 'short') {
        content.style.minHeight = '200px';
      } else {
        content.style.minHeight = '800px';
      }
    }
  </script>
</body>
</html>

Best Practices & Browser Support

✅ Recommended Practices

  • Always test with both short and long content
  • Use mobile-first responsive approach
  • Consider using CSS Grid for complex layouts
  • Test in multiple browsers
  • Use semantic HTML5 elements
  • Consider accessibility (keyboard navigation)

❌ Common Mistakes

  • Forgetting to set min-height: 100vh
  • Using fixed heights that break responsiveness
  • Not testing on mobile devices
  • Overcomplicating with JavaScript
  • Ignoring older browser support
  • Using too many wrapper elements

🌐 Browser Support

Flexbox
98.5%+
CSS Grid
97%+
Calc()
99%+
Viewport Units
98%+

When to Use Sticky Footer vs Regular Footer

✅ Use Sticky Footer For:

  • Web applications and dashboards
  • Content-light pages (landing pages, contact forms)
  • When you want consistent footer placement
  • Modern websites with variable content length
  • When footer contains important navigation

🔄 Use Regular Footer For:

  • Content-heavy pages (blogs, articles)
  • When footer should only appear after all content
  • Simpler websites with consistent content length
  • When supporting very old browsers is critical
  • When footer contains secondary information only

Ready to Stick Your Footer? 📌

Experiment with our comprehensive examples and create your own perfect sticky footers. Never let your footer float in the middle of the page again!

< PreviousNext >