<header>
  <h1>Header</h1>
</header>

<main>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi delectus officia impedit ipsa, enim sequi sint aliquam suscipit molestiae eos perferendis consequuntur nam, consequatur ipsam similique ad omnis reiciendis. Accusamus?</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi delectus officia impedit ipsa, enim sequi sint aliquam suscipit molestiae eos perferendis consequuntur nam, consequatur ipsam similique ad omnis reiciendis. Accusamus?</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi delectus officia impedit ipsa, enim sequi sint aliquam suscipit molestiae eos perferendis consequuntur nam, consequatur ipsam similique ad omnis reiciendis. Accusamus?</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi delectus officia impedit ipsa, enim sequi sint aliquam suscipit molestiae eos perferendis consequuntur nam, consequatur ipsam similique ad omnis reiciendis. Accusamus?</p>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi delectus officia impedit ipsa, enim sequi sint aliquam suscipit molestiae eos perferendis consequuntur nam, consequatur ipsam similique ad omnis reiciendis. Accusamus?</p>
</main>

<footer>
  &copy; 2017
</footer>

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}









body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.6;
}

header {
  background: #123456;
  color: #fff;
  padding: 40px 20px;
}

main  {
  padding: 40px 20px;
}

footer {
  background: #123456;
  color: #fff;
  padding: 40px 20px;
}