Is there a way to make absolutely positioned divs expand the container?

Question

I have html template - div#container inside body, and some absolutely-positioned divs in container w/o fixed height. Is there a way to expand container to 100% height of page?

Here is an image demostrating my problem: http://habreffect.ru/files/4f3/54ad48420/q.png

I understand, that absolutely positioned divs are "invisible" for container, but unfortunately i got browser window expanded. The problem is, that i can't make body to fit 100% of page, and if I make height:100% of body (and html) it will fit 100% of window height (my is about 900px), but not a page height.

Plz sorry if question is really stupid.

Answer 1

You'll have problems with explorer (can't remember which versions) but you can set

left:0;
right:0;
top:0;
bottom:0;

to expand an absolutely positioned element within a container whose dimensions have been set (in it or in a parent)

Answer 2

The only way I can see is through Javascript

// returns the coordinates of top/left corner of an element
function getPosition(obj)
{
    var left = 0;
    var top = 0;
    if (obj.offsetParent)
    {
        do
        {
        left += obj.offsetLeft;
    top += obj.offsetTop;
    }
    while (obj = obj.offsetParent);
}
return {x:left, y:top};
}

document.onload = function()
{
    var div = document.getElementById('yourLowestPositionnedDiv');
    var divBottom = getPosition(div).y + div.offsetHeight; // y coordinate of the bottom/left corner
    document.body.style.height = divBottom - getPosition(document.body).y;
}

This code will expand the size of your body at runtime so that it ends just below your lowest absolute-postioned div.