Structure layout

HTML

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

<main>
  <content>
    <p>content</p>
  </content>
  
  <footer>
    <p>Footer</p>
  </footer>
</main>

CSS

html,
body {
	margin:0;
	padding:0;
	min-height:100vh;
}

header {
	background: LightSlateGray;
  height: 100px;
  line-height: 100px;
	padding: 0 10px;
}
 header h1 { margin: 0; }

main { height: auto; min-height: calc(100vh - 100px); }
content, footer { display: inline-block; width: 100%; }

content { height: auto; min-height: calc(100vh - 200px); background:lightblue; }
footer {
	height:100px;			/* Height of the footer */
	background:#6cf;
}