Sticky Footer Layout with Flexbox

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures the body takes full viewport height */
  margin: 0; /* Remove default body margin */
}

.content {
  flex-grow: 1; /* Allows content to grow and push footer down */
  padding: 20px;
  background-color: #f8f8f8;
}

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

How it works: This snippet demonstrates how to achieve a 'sticky footer' layout using Flexbox. By setting the `body` to `display: flex` and `flex-direction: column`, the children (e.g., header, main content, footer) are stacked vertically. The critical part is `min-height: 100vh` on the `body` and `flex-grow: 1` on the `.content` area. `flex-grow: 1` allows the content section to take up all available vertical space, effectively pushing the `footer` to the bottom of the viewport. If the content overflows, the footer will simply follow it.