2

我正在开发一个浏览器游戏。到目前为止，我一直在使用所有绝对位置。因此，我必须自己设置每个页面高度。现在试图通过这个问题，但由于我在我的一切中使用绝对位置，它总是阻止浏览器计算正确的 div 高度。

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

谢谢你。

4

3 回答 3

6

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

编辑：您问是否可以使用 jQuery。是的，如果您知道任何孩子何时发生变化。此代码假定父级是偏移父级（即，它还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'});

试试 JSFiddle 上的 jQuery 解决方案。

于 2011-09-10T02:36:21.380 回答
2

您必须了解，Position: absolute这会将 div 置于其正常流程之外。这意味着即使一个 div 在另一个 div 中，当它被渲染时，它也在所有这些 div 之外。因此，您无法计算“内部”是什么，因为它们实际上是“外部”。

于 2011-09-10T02:38:27.553 回答
1

您可以使用 CSS 来读取位置。我觉得你正在尝试使用这样的 CSS 计算顶部和左侧：

documnent.getElementById('theDiv').style.left;

但是您应该依赖浏览器计算的偏移量。要读取准确的正确位置，请使用offsetTop和offsetLeft

documnent.getElementById('theDiv').offsetLeft; //gives you right number.

CSS left 值与 offsetLeft 不同的原因是 CSS left 是元素非常左边缘与其第一个相对父元素左而不是浏览器边缘之间的空间量。

如果您更喜欢使用 jQuery，那么有两种 jQuery 方法可以为您提供位置。一个是.position()，一个是.offset()。偏移量是适合您的。

于 2011-09-10T02:39:35.957 回答