Question

is there a way to auto adjust container DIV height to accommodate absolutely positioned child DIVs? i d like to get something like

+-----------------------+
| 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保持零高度。我理解,这可能是预期的行为,作为元素的流当绝对定位,但是有一个解决方案吗?(除了precalculating产生的高度和手动设置)

Answer 1

如果你使用位置:相对位置而不是绝对一个空的空间将在页面结构元素,和这个空间将元素的高度你已经感动了。

所以你可以浮动chld1 chld2让他们肩并肩,添加顶部和底部填充压低chld 3和使用位置相对于将它们分开,搬到任何高度。然后在chld3使用清晰。

类似的

#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 2

溢出:汽车

这是新的<强> clearfix < /强>方法,仅供参考。然而,它并不总是扩大容器的高度最高< em > < / em >和< em >绝对定位< / em >孩子。

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解决方案对于这个小问题,这涉及(您需要添加id字段的html代码):

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”的位置。

友情链接