Html 自动调整容器 <DIV> 高度以容纳绝对定位的子 <DIV>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/731907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
auto adjust container <DIV> height to accommodate absolutely positioned child <DIV>s
提问by Dmitry Avtonomov
is there a way to auto adjust container DIV height to accommodate absolutely positioned child DIVs? i'd like to get something like
有没有办法自动调整容器 DIV 高度以适应绝对定位的子 DIV？我想得到类似的东西
+-----------------------+ | container | | +------+ +------+ | | | chld | | chld | | | | 1 | | 2 | | | | | | | | | +------+ +------+ | | +------+ | | | chld | | | | 3 | | | | | | | +------+ | +-----------------------+
i try something like:
我尝试类似：
<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>
but the "container" div stays zero height. I understand, that this might be the expected behaviour, as elements are 'taken out' of the flow when positioned absolutely, but is there a workaround for this? (except for precalculating the resulting height and setting it manually)
但“容器”div 保持零高度。我明白，这可能是预期的行为，因为元素在绝对定位时会从流中“取出”，但是否有解决方法？（除了预先计算结果高度并手动设置）
采纳答案by wheresrhys
If you use position:relative instead of position absolute an empty space will stay in the page structure where the element should be, and this space will be the height of the element you've moved.
如果您使用 position:relative 而不是 position absolute 一个空白空间将保留在元素应该在的页面结构中，并且这个空间将是您移动的元素的高度。
So you could float chld1 and chld2 to get them side by side, add top & bottom padding to push chld 3 down and use position relative to split them apart and move to any height. Then use clear both on chld3.
因此，您可以浮动 chld1 和 chld2 以将它们并排放置，添加顶部和底部填充以将 chld 3 向下推，并使用相对位置将它们分开并移动到任何高度。然后在 chld3 上使用 clear。
Something like
就像是
#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>回答by Ahmad Bagadood
overflow:auto
溢出：自动
This is the new clearfixmethod, FYI. However, it doesn't always expand the container to the height of its tallest& absolutely positionedchild.
这是新的clearfix方法，仅供参考。但是，它并不总是将容器扩展到其最高且绝对定位的孩子的高度。
回答by Dmitry Avtonomov
i ended up using clearfix, this allows me to set the desired width of the container, and it's height will be adjusted automatically, depending on the contents (this works in all browsers)
我最终使用了 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>
回答by buti-oxa
No. The whole idea is that absolutely positioned element does not influence its parent layout.
不。整个想法是绝对定位的元素不会影响其父布局。
Try achieving your goal by relatively positioning floats instead of absolute positioning of divs. It is not as convenient (because of starting position of your floats is not ass 0,0) but it will work.
尝试通过相对定位浮动而不是绝对定位 div 来实现您的目标。它不是那么方便（因为你的浮点数的起始位置不是屁股 0,0）但它会起作用。
回答by Nicola
I've troubled quite a lot to achieve this and now that i have a solution it looks like it would have been so simple, anyway, some jQuery/Javascript is needed:
为了实现这一点，我遇到了很多麻烦，现在我有了一个解决方案，它看起来很简单，无论如何，需要一些 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);
});
I wrote and implemented this little script in a WordPress theme hence you see the "$" are converted to "jQuery" for compatibility but if you are not using WordPress you should revert them back to "$".
我在 WordPress 主题中编写并实现了这个小脚本，因此您会看到“$”被转换为“jQuery”以实现兼容性，但如果您不使用 WordPress，您应该将它们恢复为“$”。
The situation i was in was even more difficult than the one in the question because the user wanted to autonomously absolutely position each element in the container and the order in which elements appeared in the dom was not related to their position in the container: totally unexpectable results (first element in the dom may appear as last bottom element in the window for example).
我所处的情况比问题中的情况更困难，因为用户想要自主地将每个元素绝对定位在容器中，元素出现在 dom 中的顺序与其在容器中的位置无关：完全出乎意料结果（例如，dom 中的第一个元素可能显示为窗口中的最后一个底部元素）。
Also the heights of elements were all different, all different heights and all different top values (offset), a nightmare.
此外，元素的高度都不同，所有不同的高度和所有不同的顶部值（偏移量），这是一场噩梦。
What the script does is get the height and top value of each element, sum them and put this sum in an array, the array is then checked to find the biggest value, this value is the height the container will be set to, magic!
脚本所做的是获取每个元素的高度和顶部值，将它们相加并将这个总和放入一个数组中，然后检查该数组以找到最大值，这个值就是容器将被设置为的高度，神奇！
回答by Konrad Ga??zowski
I couldn't find any simple pure-javascript workaround for this little problem, so here it comes (you need to add id fields to your html code):
对于这个小问题，我找不到任何简单的纯 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';
It basically increases "container" height based on absolute bottom position of "chld3".
它基本上根据“chld3”的绝对底部位置增加“容器”高度。
回答by wiebersk
If you give the .container div a height of 100% it should calculate it from the child elements in most browsers but unfortunately not IE6 or lower.
如果你给 .container div 一个 100% 的高度，它应该从大多数浏览器中的子元素计算它，但不幸的是不是 IE6 或更低版本。
