Making An Element Fill 100% Height In Pure CSS

A common problem that web developers have is trying to make an element span 100% of its parent container's height.  Most solutions to this problem involve JavaScript that is bound to resize events, load events, etc.  I am writing this blog post to tell you that there is a better way!  This new method works in most modern browsers, all the way down to IE7.  The basic idea is that you absolutely position the element and then simultaneously set its top and bottom positions to 0.  By relatively positioning the element's parent, you can limit the element's reach to the boundaries of its parent.

 

Here's a Fiddle of the trick.