Holy grail layout with 100% height

Question

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.

If anyone could help me out on this it would be greatly appreciated!

What is the difference between what you want and http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm — Gaurav, Dec 23 '10 at 02:19
The difference is that in matthewjamestaylor.com's solution the page stops before the window (if you remove the text) like this http://oi55.tinypic.com/ezhbvb.jpg. Resulting in some unwanted blank space in at the bottom of the browser window. My wish is for the page to not have that blank space, so the columns will need to stretch to the bottom even if there is not enough content on the page. — Henrik O. Skogmo, Dec 23 '10 at 04:39

score 8 · Accepted Answer · answered May 15 '17 at 20:31

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>

+1 and by far and in my knowledge the only good answer here! Flexboxes as of 20917 are the only ones that can do this without introducing any other problems! — Sam, Jun 01 '17 at 10:28

Alex Nolasco · Answer 2 · 2020-07-18T21:27:24.117

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>

score 0 · Answer 3 · answered Dec 23 '10 at 01:55

0

See this technique for top/bottom, and just put sidebars in it. Even works in IE6 :p

answered Dec 23 '10 at 01:55

Phrogz

296,393
112
651
745

Ah, those are static top and bottom. What I am looking for is a layout that includes the top and bottom in the scrolling, if you know what I mean :) – Henrik O. Skogmo Dec 23 '10 at 02:06
@HenrikSkogmo I do not know what you mean. Please elaborate how to handle content that is shorter than the browser window, as well as taller than the window. – Phrogz Dec 23 '10 at 02:10
Here is an example, http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm. The problem with this layout is that if you remove the text of the 3 columns, you will be left with a page that look like this, http://oi55.tinypic.com/ezhbvb.jpg. I want the columns to stretch down to the bottom of the page with the footer. :-) – Henrik O. Skogmo Dec 23 '10 at 02:17
1

@HenrikSkogmo That does not fully answer the questions I asked. Also, please use the word "window" instead of "page" if that's what you mean. Please also specify how to handle if a column is longer than the content, and shorter. _(That's four questions now for you to clarify.)_ – Phrogz Dec 23 '10 at 02:21

Gaurav · Answer 4 · 2010-12-23T03:12:45.680

-1

This seems to mostly do what you need. http://www.savio.no/examples/three-column-layout-6.asp It uses a faux 100% height column in addition to the three.

edited Dec 23 '10 at 03:12

answered Dec 23 '10 at 02:52

Gaurav

12,662
2
36
34

After some experimenting and testing faux columns is truly a nightmare to wrap your head around. A lot of layers and div(isions). It looks like the holy grail have two different paths. Thanks for the solution! But I am afraid I prefer the invisible-content way. – Henrik O. Skogmo Dec 23 '10 at 04:34

score -2 · Answer 5 · answered Dec 23 '10 at 03:03

-2

Use the following for the two sidebars:

padding-bottom:9999px;
margin-bottom:-9999px;

This creates "invisible" content which allows the sidebars to stretch all the way to the bottom (and the negative margin "normalizes" the sidebar dimensions so that calculations carried out on the sidebar still make sense).

answered Dec 23 '10 at 03:03

Madison Caldwell

862
1
7
16

BTW, if your page is long enough, this will break. I'm not sure how large these values can be, but you can test larger values if necessary... – Madison Caldwell Dec 23 '10 at 03:04
Using this method is much cleaner, but a bit unreliable and "limited". But I with big enough numbers and content management, this would work in my favor. Thanks! – Henrik O. Skogmo Dec 23 '10 at 04:30
1

I can't get this to work at all. Can you explain a little bit more what to do? [This is as far as I could get.](http://jsfiddle.net/VHc4a/) – sdleihssirhc Dec 23 '10 at 05:22

Holy grail layout with 100% height

5 Answers5

Linked