Building a Reliable Sticky Footer Layout with Flexbox

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

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

.header {
  background-color: #333;
  color: white;
  padding: 20px;
}

.main-content {
  flex-grow: 1; /* This makes the content area expand to fill available space */
  padding: 20px;
  background-color: #f9f9f9;
}

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

How it works: A sticky footer ensures the footer section remains at the bottom of the viewport, regardless of how much content is present on the page. This is achieved by making the `body` a flex container with `flex-direction: column`. The `main-content` element is then given `flex-grow: 1`, allowing it to expand and consume all available vertical space between the header and the footer. This pushes the footer down to the very bottom, creating a clean and consistent layout.