Search code examples
csspositioning

CSS: fix the height of a section within a variable height element

Related to this question.

Here's a fiddle: http://jsfiddle.net/DRbRS/

Notice how the red-outlined list div does not align at the bottom of the green container div.

The problem is that there is no way of knowing ahead of time what the resulting height of the list ought to be, even if the height of the header is known.

Is there any way to deal with this without resorting to javascript?

What we need is a style like height: fill;

Solution

  • Using position: absolute and setting top, left, right, and bottom: http://jsfiddle.net/QARC9/

    This article describes why it works.

    http://www.alistapart.com/articles/conflictingabsolutepositions/