<div class="body">
  <header class="page-header">
    HEADER
  </header>
  <main class="main">
    MAIN
  </main>
  <footer class="page-footer">
    FOOTER
  </footer>
</div>
html,
body {
  width: 100%; 
  margin: 0;
  padding: 0;
}

.body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding-top: 147px;
}

.page-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 147px;
  background-color: gray;
}

.main {
  flex: 1 0 auto;
  background-color: coral;
}

.page-footer {
  flex: 0 0 auto;
  background-color: gray;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.