Latest

Offshoot Blog

Getting Column Height 100% with CSS

height:100% … Why won’t it work?

The CSS height property is a tricky one. height:100% should, by definition, make a box 100% the height of its parent. This works, yes, but only when the parent has a fixed height. So, if the parent has a defined height of 100px, its child, at height:100%, will also have a height of 100px.

The issue comes when we are dealing with dynamic content, where the height is dependent on the amount of content loaded.

Sub Content
Justin is the Main Content
Sub Content

When dealing with multiple column layouts, there is usually one column that defines the height of the parent container. The traditional approach to making both sub content columns stretch to be the height of the main content column would be the Faux Columns method. Using tables (as table cells automatically take full height of the table row) is also an option, but that throws any developments in Web Standards out the window.

I have stumbled upon a better way, using the CSS property: position.

Using absolute / relative positioning has many hidden and useful secrets. Most of the position power lies in the idea that you are decoupling content from the natural flow.

By default, setting an element to position:absolute and then defining its top, bottom, left or right values will position said element to the pixel value from the top, bottom, left or right, relative to the top left corner of the body element. When you set a parent container to position:relative, however, absolutely positioned elements will be positioned relatively (appropriately named) to the parent container’s top left corner.

Now, it makes sense to position something top:30px, right:30px or bottom:30px, left:30px. But what happens if you add bottom and top values?

Sub Content
Justin is still the Main Content
Sub Content

And there you have it. When you use both the top and bottom values together, the top of the child element is positioned to the top of the parent element and the bottom of the child gets linked to the bottom of the parent, giving not only the appearance but the functionality of full column heights.

There are a few things you have to remember though. Do not set the main content column (the parent height “definer”) to absolute positioning. This will collapse the parent container. We need this element as our anchor, so to speak. You will also notice that once you set both sub content columns to absolute positioning, the main content column will lie snug against the left side of the parent container. To solve this, give the main content column a left margin that will be the same value of your left column width (or the sum of the widths of any columns that precede the main content column). Finally, this may not be the best solution if you have a layout with three columns of changing, scrolling content, as the heights are all dependent on the one column. It’s pretty much optimized for a situation like a blog, where one column usually dominates in height.

The good stuff:

.main {
position:relative;
margin-left:20%;
}

.sub {
position:absolute;
top:0;
bottom:0;
width:20%;
}

.sub.left {
left:0;
}

.sub.right {
right:0;
}

Browser Check

I haven’t tested this extensively but it works fine in: Mozilla, Webkit and IE 7+. It doesn’t work in IE6, but do we really care? If you do, the Faux Columns technique is a good fall back for any old, out of date browsers. Please let me know your results in Opera or any other obscure browser.

Editor’s Note: No Justins were harmed in the creation of this post.

8 Responses to Getting Column Height 100% with CSS

  1. Marcielo says:

    Wow how simple is that :) – it could not be easier
    You saved my time with faux columns – to hell with IE6

    Thank you for helping me out!!

  2. Thanks for sharing. If this can replace faux columns I will think good things about you. I have to say the animated demo was so distracting I could barely read your article.

  3. Erik Oberhausen says:

    Nice!! Thanks!

  4. Brilliant! A *duh* moment, for sure.

  5. Dom says:

    Very helpful
    Thumbs up!

  6. classic mike says:

    You’re a lifesaver, I’ve just made some changes to what you suggested and they work like a charm!!!! :)

    Thank

  7. This solution seemed promising for my use case, but sometimes I have pages where the content does need to naturally scroll past the bottom of the browser. When the user scrolls down to get that content, this solution breaks. The faux columns stop at the previous bottom which gets scrolled up the screen. They don’t stay anchored to the bottom of the browser window.

    But I’m still working on it. I really like the top:0, bottom:0 positioning approach!

  8. Max says:

    So simple, it’s almost too easy. Just what I’ve been looking for. But that GIF animation is PAINFUL to the eyes! I have to agree with Arnold Gregory. I had to scroll immediately down to your css examples and skipped reading your content. ESCAPE doesn’t stop GIF animations in Chrome. :)

*
To prove that you're not a bot, enter this code
Anti-Spam Image

67 Mowat Suite 307 Toronto, Ontario M6K 3E3 Canada
p: 1.416.656.3362 / 1.866.656.3362 | f: 416.656.7236
© 2012 Offshoot Inc. All Rights Reserved