有没有办法让绝对定位的 div 扩展容器？答案

【问题标题】：Is there a way to make absolutely positioned divs expand the container?有没有办法让绝对定位的 div 扩展容器？
【发布时间】：2012-01-04 04:27:01
【问题描述】：

我有 html 模板 - div#container 位于 body 中，容器中有一些绝对定位的 div，没有固定高度。有没有办法将容器扩展到页面的 100% 高度？

这是演示我的问题的图像：http://habreffect.ru/files/4f3/54ad48420/q.png

我明白，绝对定位的 div 对容器来说是“不可见的”，但不幸的是，我的浏览器窗口已展开。问题是，我不能让 body 适合 100% 的页面，如果我让 height:100% of body （和 html）适合 100% 的窗口高度（我的大约是 900px），但不是页面高度。

如果问题真的很愚蠢，请见谅。

【问题讨论】：

标签： html css

【解决方案1】：

你会遇到资源管理器的问题（不记得是哪个版本）但你可以设置

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

在已设置尺寸的容器中（在容器中或在父容器中）扩展绝对定位的元素

【讨论】：

【解决方案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 下方结束。

【讨论】：