<!-- could use body element instead of wrap if wanted -->
<div class="wrap">
  <header>
    <h1>Fluid height Header can go here: Fluid height Header can go here: Fluid height Header can go here</h1>
  </header>
  <main class="main">
    <div class="sidebar">
      <p>Sidebar Start Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar</p>
      <p>Sidebar Start Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar</p>
      <p>Sidebar Start Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar</p>
      <p>Sidebar Start Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Finish</p>
    </div>
    <div class="content">
      <p>Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
        Main content Main content Main content Main content</p>
    </div>
  </main>
  <footer>
    <p>Fluid height footer can go here: Fluid height footer can go here: Fluid height footer can go here: Fluid height footer can go here: Fluid height footer can go here: Fluid height footer can go here: Fluid height footer can go here: Fluid height footer
      can go here: Fluid height footer can go here:Fluid height footer can go here: Fluid height footer can go here: Fluid height footer can go here: </p>
  </footer>
</div>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body { 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body {
	margin:0;
	padding:0
}
.wrap {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	max-width:1200px;
  margin:auto;
}
.main {
	flex: 1;
	display:flex;
}
footer, header {
	background:#ccc;
	padding:10px;
  position:webkit-sticky;
  position:sticky;
}
header{top:0;}
footer{bottom:0;}
.sidebar {
	background:#f9f9f9;;
	flex:0 0 300px;
	padding:10px;
}
.content{
	background:#eee;
	padding:10px;
	flex:1;	
}
@media screen and (max-width:680px){
	.sidebar{flex: 0;order:2}
	.main {flex-direction:column;}	
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.