htmlcsslayout

Holy grail layout with 100% height


I am trying to make a css layout that looks like this

enter image description here

The CSS term for this type of layout is known as the "holy grail" I think. The problem I am facing is that when I use layouts and solutions I find online I do not get them to work properly as I want them to. What I am trying to do is make a page that, regardless of content, will have the footer at the bottom of the browser and the columns stretching down to it. So far I have only seen pages that have the footer placed where the content stop, the result is some blank space under the footer.


Solution

  • 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>