Flexbox: Implementing a Sticky Footer Layout

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

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

.site-header,
.site-footer {
  padding: 1em;
  background-color: #f8f8f8;
  border: 1px solid #eee;
  text-align: center;
}

.site-main {
  flex-grow: 1; /* This pushes the footer down */
  padding: 1em;
  background-color: #fff;
}

How it works: This Flexbox technique ensures a 'sticky' footer remains at the bottom of the browser viewport. By setting `body` to `display: flex` with `flex-direction: column` and giving `min-height: 100vh` (implicitly `height: 100%` on `html, body`), the main content area (`.site-main`) is given `flex-grow: 1`. This property makes the main content take up all available space, effectively pushing the footer to the very bottom.