footer-layout

by Abdul Ahmad

HTML

<div class='root'>
  <div class='header'>
    header
  </div>
  <div class='body-footer'>
    <div class='body'>
      <div class='content-box'>

      </div>
      <div class='content-box'>

      </div>
      <div class='content-box'>

      </div>
      <div class='buttons'>
        <button>
          back
        </button>
        <button>
          next
        </button>
      </div>
    </div>
    <div class='footer'>
      footer
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

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

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

.header {
  flex-grow: 0;
  flex-shrink: 0;
  height: 40px;
  border-bottom: 1px solid #ddd;
}

.body-footer {
  overflow-y: auto;
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
}

.body {
  flex-grow: 1;
  flex-shrink: 0;
  position: relative;
}

.buttons {
  position: sticky;
  bottom: 0;
  width: 100%;
  background: white;
  padding: 10px;
  text-align: right;
}

.footer {
  flex-grow: 0;
  flex-shrink: 0;
  height: 30px;
  border-top: 1px solid #ddd;
}

.content-box {
  height: 200px;
  margin: 20px;
  background: #eee;
}