Holy grail layout with 100% height

It's 2020, how about some Grid?

 body {
    display: grid;
    height: 100vh;
    grid-template: auto 1fr auto / auto 1fr auto;
  }

  header {
    grid-column: 1 / 4;
  }

  .left-sidebar {
    grid-column: 1 / 2;
  }

  main {
    grid-column: 2 / 3;
    overflow: auto;
  }

  .right-sidebar {
    grid-column: 3 / 4;
  }

  footer {
    text-align: center;
    grid-column: 1 / 4;
  }
   
  html, body {
      margin: 0;
      padding: 0;
      background-color: #aed9e0;
  }

  body > * {        
    outline: 1px dashed #247ba0;
  }

  .left-sidebar, .right-sidebar, main, header, footer {
    padding: 2rem;
  }
<body>
  <header><strong>Header</strong></header>
  <div class="left-sidebar">Left Sidebar</div>
  <main contenteditable>
     Main Content
     <ul>
       <li>Item 1</li>
       <li>Item 2</li>
     </ul>
  </main>
  <div class="right-sidebar">Right Sidebar</div>
  <footer>Footer Content</footer>
</body>

In 2017, you can achieve this layout pretty gracefully and easily with flexbox: 

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
header {
  flex: 0 0 100px;
  background-color: #C14F4F;
}
main {
  flex: 1;
  display: flex;
  background-color: #699EBD;
}
footer {
  flex: 0 0 40px;
  background-color: #C14F4F;
}
.left, .right {
  flex: 0 2 150px;
  background-color: #C28282;
}
.middle {
  flex:1 1 300px;
}
<header></header>
<main>
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</main>
<footer></footer>

Tags:

Css

Layout

Recent Posts