Create a Full-Height Page Layout with Sticky Footer using Flexbox

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

header, footer {
  padding: 15px;
  background-color: #eee;
  text-align: center;
}

.main-content {
  flex-grow: 1; /* Allows main content to take up all available space */
  padding: 20px;
  background-color: #fff;
}

How it works: This Flexbox pattern creates a common full-height page layout. The `body` is set to `display: flex` with `flex-direction: column`, stacking its children vertically. `min-height: 100vh` ensures the body occupies the full viewport height. The `main-content` area then uses `flex-grow: 1` to expand and fill any remaining vertical space, effectively pushing the `footer` to the bottom of the page.