Structure layout

HTML

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

<main>
  <nav>
    <p>Sidebar</p>
  </nav>
  
  <content>
    <p>Content</p>
  </content>
  
  <footer>
    <p>Footer</p>
  </footer>
</main>

CSS

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

header {
	background: LightSlateGray;
  min-height: 10vh;
	padding:10px;
}
  header h1 {
    margin:0;
    padding:10px 0 0 10px;
  }

main { height: 0; min-height: 90vh; }

nav, content, footer { display: inline-block; float: left; }
content, footer { width: 80%; }

nav { min-height: 100%; width: 20%; }

content { height: auto; min-height: 65%; }
  
footer {
	height: 35%;			/* Height of the footer */
	background:#6cf;
  float: right;
}
  footer p {
    margin:0;
    padding:10px;
  }