Page Flex Layout

by Bacher

HTML

<div class="cont">
  <div class="header-stub"></div>
  <div class="header">
    <div class="content__content">
      HEADER
    </div>
  </div>
  <div class="content">
    <div class="content__content">
      HELLO WORLD<br>
      HELLO WORLD<br>
      HELLO WORLD<br>
      HELLO WORLD<br>
      HELLO WORLD<br>
      HELLO WORLD<br>
      HELLO WORLD<br>
      HELLO WORLD<br>
      HELLO WORLD<br>
    </div>
  </div>
  <div class="footer">
    <div class="footer__content">
      FOOTER
    </div>
  </div>
</div>

CSS

HTML {
  height: 100%;
}

BODY {
  margin: 0;
  height: 100%;
}

.cont {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.cont > * {
  width: 100%;
}

.header, .header-stub {
    flex-shrink: 0;
  height: 50px;
}

.header {
  position: fixed;
  top: 0;
  background: lightblue;
}

.content {
  flex-shrink: 0;
  flex-grow: 1;
  background: yellow;
}

.footer {
  height: 50px;
  flex-shrink: 0;
  background: brown;
}

.header__content,
.content__content,
.footer__content {
  max-width: 400px;
  margin: 0 auto;
}