有没有一种方法可以使绝对定位的div扩展容器？

Question

我有一个HTML模板 - body中的div#container，以及一些没有固定高度的容器内绝对定位的div。有没有办法将容器扩展到页面的100％高度？

这里是一个演示我的问题的图片：http://habreffect.ru/files/4f3/54ad48420/q.png 我知道，绝对定位的div对于容器来说是“不可见的”，但不幸的是我的浏览器窗口已经扩展了。问题是，我无法使body适合整个页面的100％高度，如果我使body（和html）的height:100％，它将适合窗口高度的100％（我的大约为900px），但不是页面高度。

如果问题很蠢，请原谅。

- user528623

Answer 1

你会在使用IE浏览器时（我不记得哪些版本）遇到问题，但你可以进行设置。

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

在已经设置了容器的尺寸（在容器内或父级元素中）的情况下，扩展一个绝对定位的元素。

- Riccardo Galli

Answer 2

我唯一能想到的方法是通过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;
}

该代码将在运行时扩展您的主体大小，以便它结束于最低绝对定位的div下方。

- Thibault Witzig