Month: June 2010

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?

Less Stop and More Go

Posted by – June 19, 2010

This is a post about driving. Yes, one of those.

Last night I got caught in a traffic jam on I-15 southbound somewhere between South Jordan and Thanksgiving Point. At 11:30 PM. That’s Utah for you.

(Okay, it was a Friday night, and, due to construction, the four-lane highway was reduced to a single lane. Still, there were a ton of cars on the road for that hour of night.)

Regardless of how ludicrous it may be to get caught in a traffic jam at 11:30 PM, I am certain that you have been there before. You, a single driver caught in the jam, are currently completely stopped. This is not a pleasant state of affairs for one who is trying to get somewhere. Irritation mounts inside you. Suddenly, a ray of hope! The car in front of you starts to move! You take off after it like a shot.

Because you have the reaction time of a normal human being, a space of pavement opens up between you and the car ahead of you before you are able to punch the accelerator. This space enables you to accelerate to a higher speed than the clogged road can sustain. All too soon you have to slam on your brakes. Oh, and by the way, the person in front of you is doing the same thing. This behavioral pattern creates waves that propagate through the traffic, causing everyone to stop and go.

Stop. Go. Stop. Go. This is giving me a headache.

Beyond driver fatigue, stop and go driving is bad for your car and bad for your wallet. All that accelerating and braking puts wear and tear on your engine and brakes, and sinks your MPG into the crapper. Fortunately, you can beat this cycle (with a stick, if need be).

The first step is to recognize that, because the road is over capacity, everyone is going to have to slow down. You can’t change that so you might as well accept it.

The second step is to try to find the speed that the road can accommodate. If you can find and travel at this speed, you won’t have to be constantly stopping and going—you’ll just go, like you normally would on the freeway (only slower). The trick is to open up a large gap between you and the car in front of you. When they get too far away, you can go a little faster; if you find yourself gaining on them, ease off the accelerator.

You should see the distance between yourself and the car in front of you fluctuate regularly. This is because they are caught in the waves and are constantly stopping and going. If the distance between you is large enough, it will eat the wave, enabling you to travel at a more-or-less constant speed. Your traffic jam experience will have a lot less stop and a lot more go.

Last night, I had a great opportunity to practice this technique, and I was treated to a sight that, because I am a nerd, I found delightful. The flashing taillights of the cars in front of me created a very visible wave pattern that propagated up and down the line. But behind me, as far as I could see, everyone was traveling at a constant speed. I had erased the waves.

Then I realized that I wasn’t irritated anymore. I was having fun! By making a very simple change to my behavior, I was able to change the behavior of those behind me, saving all of us some gas and reducing our irritation. I, possessed of the power of nerdiness, used that power for tangible good! And now, you have that same power. Go forth, nerd heros, and use your power for good.

These ideas come from William Beaty, electrical engineer and nerd hero. His site, trafficwaves.org, elucidates them in meticulous and eloquent detail. If you don’t have time to read it, at least watch the video that’s linked from the front page.