Min Height full height.
So this was my problem; with two divs (#header and #content) inside a #wrapper, how do I get #content to take up the rest of the #wrapper div, when I know #head’s height (say 200px)?
This would’ve been easy with tables, a simple ‘*’ , would’ve taken up the remaining height, but that’s not possible with Divs. It’s made even more complicated by browser problems with ‘min-height’. I can think of a bunch of ways to do this (DOM scripting, background image-ghosts) but is there a way of doing it in pure CSS? I instantly dashed in and tried to set this up a bunch of different ways, but what I should have done was properly work out what this meant.
- #header{ This is the easy one. A simple div with height:200px;}
- #wrapper{ Min height of 100% screen height, but should expand as content fills it. }
- #content{ Min height of 100%-200px, but should expand as content fills it.
So that seems simple but here’s the problem. Whatever technique I use is going to be using a bunch of nested %’s for the height. This is because the value taken as height:100% is taken from the parent element. So what happens if that also has height:100%? Here we’re nesting all the way back to the body and html tags. So now we have two problems to look at. The first is how to get the #wrapper at min height:100% (of screen) and the second is how to get #content at min-height:100%-200px(of #wrapper).
Problem 1: Min height:100% of screen
I knew from previous experience that the css style Min-height is a problem for a lot of browsers, and that there are a bunch of ways to fix them. Here’s a brief round up of some fixes (or hacks).
- Min-height Fast Hack (by Dustin Diaz): Really simple, but doesn’t work on IE 5.x
- Prop-Clear (by Grey Wyvern): Here a prop (1px wide div) is used to set the min-height. This could cause complications in creating complex layouts if you forget the added 1px.
- min-height:fixed (from Mezzoblue): This uses the padding and margin styles to provide a mi-height.
- CSS min-height explained (from Search This): A newer hack that’s similar to Dustin Diaz’s.
Problem 2: 100%-200px
This should be a relativly easy problem to solve on its own. We could set a padding-top on #wrapper:200px and then the 100% that #content inherits will be adjusted properly. Unfortunately, life isn’t that straight forward. When you use ‘%’ to specify dimensions of divs, they take the dimension of their parent. But what happens if the div’s parent also uses a % to specify dimensions. Well things will trickle all the way back until it hits a px value. But what if, as the case is here, there is no px, everything is in %’s? It seems then you’re screwed.
The state of things
I’ve searched far and wide and I just can’t find an elegant solution. Because of this problem with nested %-dimensioned elements we can’t use any of the height hacks inside of the other. Thus I’m stumped. Which is ridiculous. I know I’m not the only one with this problem, and I’m sure there’s a smart solution out there, so I’m calling on you, the unwashed masses. Have you seen a solution? Can you help a brother out?