Flexbox: Creating a Sticky Footer Layout

html, body {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
}

.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Ensures wrapper takes full viewport height */
}

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

.main-content {
  flex: 1; /* This makes the main content expand and push the footer down */
  padding: 20px;
  background-color: #f0f0f0;
  line-height: 1.6;
}

How it works: This snippet solves the classic 'sticky footer' problem where the footer should always be at the bottom of the viewport, regardless of how much content is on the page. By making the `body` a flex container with `flex-direction: column` and `min-height: 100vh`, and then applying `flex: 1` to the main content area, the main content will automatically expand to fill all available vertical space, pushing the footer to the bottom. If the content overflows, the footer will simply follow the content.