Javascript 扩展高度以包括绝对定位的子对象

我正在为CMS构建一个html/javascript主题设计器。元素绝对定位，可通过鼠标移动/调整大小，和/或包含可编辑文本，其高度可由行数决定。但是，我遇到了这样一个问题：父元素的高度没有扩展到包含其绝对定位的子元素

最小代码（也在上）：

div.layer{位置：绝对}
div.layer1{宽度：400px；边框：1px实心#ccc}
div.layer2{顶部：15px；左侧：100px；宽度：100px；边框：1px纯蓝色}
容器应该扩展到子容器的底部。
具有可编辑文本的子项。

一个只有CSS的解决方案是理想的，我不担心老浏览器。但我主要是在寻找任何方法来防止javascript需要在每个页面上使用创建的主题来设置其高度（因为具有相同主题的页面可能有不同数量的文本）

已经有一些类似的问题，但他们公认的答案（例如，不要使用绝对定位）在我的案例中不起作用。除非有办法使多层可拖动/可调整大小的元素不处于位置：绝对。绝对位置的元素从流中删除，因此被其他元素忽略

---

唯一的方法是将子位置设置为位置：相对，这样就可以使用右、左、上、下移动子位置，如果您想保持子位置绝对不变，还可以将父显示更改为显示：内联块

，可以使用以下脚本调整容器的大小：

var layer1=document.getElementsByClassName（'layer1'），
i=0，len=layer1.length，childHeight；
对于（；i

我找到了一个纯css解决方案！总之：

将子元素设置为位置：相对，而不是绝对

将它们的边距向右设置为负宽度，使它们的有效宽度为零，并使它们浮动：向左使它们保持在同一行上。这使得它们的原点都是0，0

然后，我们可以设置它们的左侧和边距顶部属性，使它们完全位于其父对象中。请注意，需要使用边距顶部而不是顶部，因为顶部不会向下推父元素的底部

或代码如下：

<style>
    div.layer { position: relative; float: left; }
    div.layer1 { width: 400px; border: 1px solid black }
    div.layer2 { margin-top: 20px; left: 100px; width: 100px; margin-right: -100px; border: 1px solid blue }
    div.layer3 { margin-top: 30px; left: 170px; width: 100px; margin-right: -100px; border: 1px solid red }
    div.layer4 { margin-top: 30px; left: 20px; width: 60px; margin-right: -60px; border: 1px solid green }
</style>
<div class="layer layer1" style="position: relative; display: block; width: 400px; border: 1px solid black;">
    Container
    <div class="layer layer2" contentEditable>Edit me</div>
    <div class="layer layer3">
        <div class="layer layer4" contentEditable>Edit me</div>
    </div>
</div>

div.layer{位置：相对；浮动：左；}
div.layer1{宽度：400px；边框：1px纯黑}
div.layer2{页边距顶部：20px；左侧：100px；宽度：100px；页边距右侧：-100px；边框：1px纯蓝色}
div.layer3{页边距顶部：30px；左侧：170px；宽度：100px；页边距右侧：-100px；边框：1px实心红色}
div.layer4{页边距顶部：30px；左侧：20px；宽度：60px；页边距右侧：-60px；边框：1px纯绿色}
容器
编辑我
编辑我

我不知道，但我不认为用纯CSS就可以做到。谢谢你的想法，但不幸的是，当有多个孩子的时候，这就失败了。第二个孩子的位置与第一个孩子的位置偏移，这是position:relative的预期行为。如果找不到更好的解决方案，我将使用类似的解决方案。但当有几十个元素以各种方式嵌套时，它就变得更复杂了。我不喜欢在页面加载时运行javascript来修复布局。这真是太棒了。荣誉+MySpace为您赢得2点荣誉（或+1分左右）。

var layer1 = document.getElementsByClassName('layer1'),
    i = 0, len = layer1.length, childHeight;
for(; i < len; i++) {
    childHeight = layer1[i].getElementsByClassName('layer')[0].clientHeight;
    layer1[i].style.height = childHeight + 'px';
}
document.addEventListener('keyup', function(e) {
    if(e.target.className.indexOf('layer2') !== false) {
        e.target.parentNode.style.height = e.target.clientHeight + 'px';
    }
});

<style>
    div.layer { position: relative; float: left; }
    div.layer1 { width: 400px; border: 1px solid black }
    div.layer2 { margin-top: 20px; left: 100px; width: 100px; margin-right: -100px; border: 1px solid blue }
    div.layer3 { margin-top: 30px; left: 170px; width: 100px; margin-right: -100px; border: 1px solid red }
    div.layer4 { margin-top: 30px; left: 20px; width: 60px; margin-right: -60px; border: 1px solid green }
</style>
<div class="layer layer1" style="position: relative; display: block; width: 400px; border: 1px solid black;">
    Container
    <div class="layer layer2" contentEditable>Edit me</div>
    <div class="layer layer3">
        <div class="layer layer4" contentEditable>Edit me</div>
    </div>
</div>