<!-- 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;}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.