Made with 100% Pure Height

Posted by – June 23, 2010

It happens to every budding web designer eventually: you need something, usually a div, to stretch to the entire height of its container. So, you quite reasonably use CSS to set the height to 100%. This ought to work—there’s no reason why it shouldn’t—but it doesn’t. Every single web browser in existence will point and laugh at your pathetic attempt at a simple solution to a simple problem, and then they will ignore it.

After a couple hours banging their head against the problem, most nascent web designers give up and change their design. That’s because there is no simple, reasonable way to do this. Oh, you can muck about with absolute positioning, which will work if the element’s container can also be positioned absolutely. Sadly, this isn’t often the case.

I’ve also found claims that simply setting the body’s height to 100% will make the setting work for all other elements as well. However, I’ve found that this is just plain wrong; I can’t make it work. It does work if you give the body a height using a fixed unit, such as pixels, which you will almost never be able to do.

The rationale given for why this works is that, in order to calculate a height that is specified as a percentage, the browser needs an element somewhere higher up the containment hierarchy with a defined height. I am entirely too lazy to verify whether or not this explanation is derived from the CSS spec.

(As an aside, this rationale also explains why width does not suffer from the same percentage dysfunction as height. The height of a page is determined by its content, but its width is specified by the width of the browser window unless overridden by CSS.)

Of course, whether or not the rationale is derived from the spec, it’s still a heaping load of crap. Obviously, the browser must calculate the height of every element before it can render anything. It even exposes these calculated heights to the user through Javascript.

Wait…OH!

Doing the Browser’s Work For It

I said there is no simple, reasonable way to do this, and I meant it. The solution I am about to describe is simple (thanks to the magic of JQuery), but it is in no way reasonable. Using Javascript to fix up your layouts is an obscenely stupid hack that should only be used when all saner options have been exhausted. If you can use the absolute positioning trick, do it. If you can alter your layout to avoid the need for height:100%, then do that. Don’t sully your work with this ridiculousness unless you have no other alternative.

Still reading? Ok, deep breath. Here’s the code; it’s just a few lines:

$(document).ready(height100percent);

function height100percent()  {
    $('.container').each(function()  {
        var h = $(this).height();
        $('.100percentHeightPlz', $(this)).height(h);
    });
}

For those not familiar with JQuery, let me go through this line-by-line.

  1. When the document is loaded and ready for manipulation, run the height100percent function.
  2. Find every element having the CSS class “container” and apply the given function to each of them.
  3. Get the height of the current container element.
  4. Find all objects having the CSS class “100percentHeightPlz” that are children of the current container element. Set their heights to that of their container.

Now, W3C, was that so hard?

2 Comments on Made with 100% Pure Height

  1. physical therapist says:

    this post is very usefull thx!

  2. Joe says:

    uhh, adding html, body{ height:100%; } should work,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>