Question

有没有办法自动调整容器DIV高度以适应绝对定位的儿童DIV？我想得到像

这样的东西

+-----------------------+
| container             |
|  +------+   +------+  |
|  | 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>

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

Answer 1

溢出：自动

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

Answer 2

如果使用position：relative而不是position absolute，则空格将保留在元素所在的页面结构中，此空间将是您移动的元素的高度。

所以你可以浮动chld1和chld2来并排放置它们，添加top＆amp;底部填充以向下推动chld 3并使用相对于将它们分开的位置并移动到任何高度。然后在chld3上使用clear。

像

这样的东西

#exp_outer {
  width: 400px;
  border: 1px solid black;
}
#chld1 {
  float: left;
  margin: 30px 0 20px;
  left: 50px
}
#chld2 {
  float: right;
  margin: 30px 0 20px;
  right: 50px;
}
#chld3 {
  left: 150px;
  clear: both;
}
.box {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid black;
}

<div id="exp_outer">
  <div id="chld1" class="box">Child1</div>
  <div id="chld2" class="box">Child2</div>
  <div id="chld3" class="box">Child3</div>
</div>

Answer 3

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

<style>
        .inner_box {
            position: relative;
            float: left;
            width: 50px; 
            height: 50px; 
            border: dashed thin;
            margin: 5px 5px 5px;
            text-align: center;
        }

        .outer_box {
            position: relative; 
            top: 200px;
            border: solid thin; 
            width: 190px;
            //height: 1%;
        }

        .outer_box:after {
            content: '.'; 
            display: block; 
            clear: both; 
            visibility: hidden; 
            height: 0; 
            line-height: 0;
        }
    </style>

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box">2</div>
    <div class="inner_box">3</div>
    <div class="inner_box">4</div>
    <div class="inner_box">5</div>
    <div class="inner_box">6</div>
</div>

Answer 4

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

尝试通过相对定位浮点数而不是div的绝对定位来实现目标。它不是那么方便（因为你的花车的起始位置不是屁股0,0）但它会起作用。

Answer 5

我为实现这一点而烦恼了很多，现在我有一个解决方案看起来很简单，无论如何，需要一些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中的第一个元素可能在窗口中显示为最后一个底部元素）。

元素的高度也是不同的，所有不同的高度和所有不同的顶部值（偏移），都是一场噩梦。

脚本的作用是获取每个元素的高度和最高值，求和它们并将此总和放入数组中，然后检查数组以找到最大值，该值是容器将设置为的高度，魔术！

Answer 6

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

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';

它基本上根据“chld3”的绝对底部位置增加“容器”高度。

Answer 7

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

自动调整容器<div>高度以容纳绝对定位的子<div> s </div> </div>

7 个答案: