Html 自动调整容器<；部门>；适合绝对定位儿童的高度<；部门>；s

有没有办法自动调整容器DIV高度以适应绝对定位的子DIV？ 我想买点像这样的东西

+-----------------------+ | container | | +------+ +------+ | | | chld | | chld | | | | 1 | | 2 | | | | | | | | | +------+ +------+ | | +------+ | | | chld | | | | 3 | | | | | | | +------+ | +-----------------------+ +-----------------------+ |容器| | +------+ +------+ | || chld | | chld || | | 1 | | 2 | | | | | | | | | +------+ +------+ | | +------+ | || chld|| | | 3 | | | | | | | +------+ | +-----------------------+ 我试着做如下事情：

<div class="container" style="position: relative; border: solid thin">
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 5px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 30px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 15px; top: 30px;
                             border: dashed thin;"></div>
</div>

---

但是“container”div保持零高度。我理解，这可能是预期的行为，因为元素在绝对定位时会从流中“取出”，但有解决方法吗？（除了预先计算结果的高度并手动设置）

如果给.container div一个100%的高度，它应该从大多数浏览器中的子元素计算出来，但不幸的是，不是IE6或更低版本

如果使用position:relative而不是position-absolute，则页面结构中将保留一个空白，该空白将是您移动的元素的高度

因此，您可以浮动chld1和chld2使其并排，添加顶部和底部填充以向下推动chld3，并使用相对位置将其分开并移动到任意高度。然后在chld3上使用清除两个

差不多

+-----------------------+ | container | | +------+ +------+ | | | chld | | chld | | | | 1 | | 2 | | | | | | | | | +------+ +------+ | | +------+ | | | chld | | | | 3 | | | | | | | +------+ | +-----------------------+

#exp#u外部{
宽度：400px；
边框：1px纯黑；
}
#chld1{
浮动：左；
利润率：30px 0 20px；
左：50px
}
#chld2{
浮动：对；
利润率：30px 0 20px；
右：50px；
}
#chld3{
左：150px；
明确：两者皆有；
}
.盒子{
位置：相对位置；
宽度：80px；
高度：80px；
边框：1px纯黑；
}

孩子1
孩子2
孩子3

不。整个想法是绝对定位的元素不会影响其父布局

---

尝试通过相对定位浮动而不是绝对定位div来实现您的目标。它不是那么方便（因为您的浮动的起始位置不是ass 0,0），但它会工作。

我最终使用了clearfix，这允许我设置所需的容器宽度，它的高度将根据内容自动调整（这在所有浏览器中都适用）

.内箱{
位置：相对位置；
浮动：左；
宽度：50px；
高度：50px；
边框：虚线细；
保证金：5px 5px 5px；
文本对齐：居中；
}
.外箱{
位置：相对位置；
顶部：200px；
边框：实心薄；
宽度：190px；
//身高：1%；
}
.外箱：后箱{
内容：‘’；
显示：块；
明确：两者皆有；
可见性：隐藏；
身高：0；
线高：0；
}
1.
2.
3.
4.
5.
6.

溢出：自动

---

这是新的clearfix方法，仅供参考。但是，它并不总是将容器扩展到其最高且绝对定位的子容器的高度。

我为此付出了很多努力，现在我有了一个解决方案，它看起来非常简单，无论如何，需要一些jQuery/Javascript：

jQuery(window).load(function(){
    var valueCheck = [];
    jQuery('.projectsWrap .hentry').each(function(){
        var itemObj = jQuery(this);
        var itemValues = itemObj.position();
        var top = itemValues.top;
        var height = jQuery(this).height();
        var sum = top + height;
        valueCheck.push(sum);
    });
    var res = Math.max.apply(Math, valueCheck);
    jQuery('.projectsWrap').height(res);
});

我在WordPress主题中编写并实现了这个小脚本，因此您可以看到“$”被转换为“jQuery”以实现兼容性，但是如果您不使用WordPress，您应该将它们恢复为“$”

我所处的情况甚至比问题中的情况更加困难，因为用户希望完全自主地将每个元素放置在容器中，并且元素在dom中出现的顺序与其在容器中的位置无关：这是完全无法预料的结果（例如，dom中的第一个元素可能显示为窗口中的最后一个底部元素）

而且元素的高度都不一样，所有不同的高度和所有不同的顶部值（偏移量），这简直是一场噩梦

---

脚本所做的是获取每个元素的高度和顶部值，求和并将其放入数组中，然后检查数组以找到最大值，该值是容器将设置的高度，magic！

对于这个小问题，我找不到任何简单的纯javascript解决方法，所以它来了（您需要将id字段添加到html代码中）：

---

它基本上是基于“chld3”的绝对底部位置来增加“container”的高度。

绝对不会在绝对定位的内部元素的情况下。当我将子元素设置为浮动时，容器的边界会塌陷（它不围绕子元素，容器DIV认为自己是空的…）“position:relative”本身不是很有用，因为这些内部div将垂直堆叠，而不是水平堆叠：((（但是如果chld3有clear:tware，它会强制外部div扩展哦，我的问题是，我已经将所有3个子元素都设置为“float:left”，这样对child3来说“clear:tware”没有任何帮助。你的例子很好！但我实际上指的是一个更一般的情况，即可以任意地将这些子元素放置在容器中。我肯定需要阅读更多相关内容。）clearfix…修复了一个我没有出现背景图像的问题（但仅在chrome中，在ff和ie中工作）。将此添加到div中，现在它有了高度和背景显示。谢谢。+1非常好。我稍微添加了此项，以允许盒子彼此重叠。有点像一副卡片。我想你可能想看看该库：你知道这个问题是在2009年提出的，并且有答案，比如使用overflow:auto。我猜你得到了答案死灵法师徽章：）

var containerBox = document.getElementById('container');
var statBoxBottom = document.getElementById('chld3').getBoundingClientRect().bottom + window.scrollY;
var mainDivBottom = containerBox.getBoundingClientRect().bottom + window.scrollY;
var boxHeightDiff = statBoxBottom - mainDivBottom;
if (boxHeightDiff > 0) 
    containerBox.style.height = Math.ceil( containerBox.offsetHeight + boxHeightDiff ) + 'px';