css - 绝对位置会阻止浏览器计算正确的高度。是否可以解决此问题

Question

我正在开发网页游戏。直到现在我一直在使用所有位置绝对。因此，我必须自己设置每个页面的高度。现在试图解决这个问题，但是因为我在我的所有地方都使用了绝对位置，所以它总是阻止浏览器计算正确的 div 高度。

有没有可能实现这个。我的意思是，例如我有 div 并且在许多使用位置绝对功能的 div 中。所以我希望这个主 div 自动计算它的高度，这将是嵌套 div 高度的总和。目前无论我尝试什么都失败了。如果我将高度设置为自动，它计算的高度为 1 像素，如果我将高度设置为主 div 的 100%，它计算为 557 像素。

谢谢。

Answer 1

不，不可能通过纯 CSS 使父元素自动调整大小以包含其所有已定位的子元素。

编辑:您询问是否可以使用 jQuery。如果您知道任何 child 何时发生变化，那就是。此代码假定父级是偏移父级(也就是说，它还将 position 设置为 static 以外的值):

// element is a jQuery object
var max=0;
element.children().each(function(index, child) {
    child=$(child);
    var childPos=child.position();
    var childMax=childPos.top+child.outerHeight();
    if(childMax>max) {
        max=childMax;
    }
});
element.css({height: max+'px'});

Try the jQuery solution on JSFiddle.