Sticky Footer

Code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Footer Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="sticky-layout-container">
    <div class="sticky-layout-content">
      <h1>Sticky Footer Example</h1>
      <p>This page has a sticky footer.</p>
      <p>The footer will always stay at the bottom even if there's minimal content.</p>
      <p>Try resizing the window to see how it behaves.</p>
    </div>
    <footer class="sticky-layout-footer">
      <div class="sticky-footer-section">
        <h3>Company</h3>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Team</a></li>
        </ul>
      </div>
      <div class="sticky-footer-section">
        <h3>Resources</h3>
        <ul>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Downloads</a></li>
          <li><a href="#">FAQ</a></li>
        </ul>
      </div>
      <div class="sticky-footer-section">
        <h3>Contact</h3>
        <ul>
          <li><a href="#">Email</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Social</a></li>
        </ul>
      </div>
    </footer>
  </div>
</body>
</html>

CSS

/* Reset and basic styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

a {
  color: #3498db;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

ul {
  list-style: none;
}

/* Sticky footer layout */
.sticky-layout-container {
  min-height: 100vh; /* Full viewport height */
  display: flex;
  flex-direction: column;
}

.sticky-layout-content {
  flex: 1; /* Takes up all available space */
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.sticky-layout-footer {
  background-color: #f8f9fa;
  padding: 30px 40px;
  border-top: 1px solid #e9ecef;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.sticky-footer-section {
  flex: 1;
  min-width: 200px;
  margin-bottom: 20px;
  padding: 0 15px;
}

.sticky-footer-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}

.sticky-footer-section ul li {
  margin-bottom: 8px;
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #f5f5f5;
  }
  
  .sticky-layout-content {
    color: #f5f5f5;
  }
  
  .sticky-layout-footer {
    background-color: #222;
    border-top-color: #333;
  }
  
  .sticky-footer-section h3 {
    color: #f5f5f5;
  }
  
  a {
    color: #4dabf7;
  }
}

/* Responsive styles */
@media (max-width: 768px) {
  .sticky-layout-footer {
    flex-direction: column;
    padding: 20px;
  }
  
  .sticky-footer-section {
    width: 100%;
    padding: 0;
    margin-bottom: 25px;
  }
  
  .sticky-footer-section:last-child {
    margin-bottom: 0;
  }
  
  .sticky-layout-content {
    padding: 20px;
  }
}

Live Preview

Code