Flexbox Sticky Footer

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1; /* This makes the content area grow and push the footer down */
  padding: 20px;
}

footer {
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

How it works: This snippet uses Flexbox to create a classic sticky footer layout. By setting `display: flex` and `flex-direction: column` on the `body`, and then applying `flex: 1` to the main content area, the content area expands to fill all available vertical space. This action effectively pushes the footer to the bottom of the viewport, ensuring it remains visible regardless of the amount of page content.