如何将容器div的大小调整为其子级的总高度？

Question

我有一个容器元素,我需要调整它的内容更改.它包含2个绝对定位的div,可以改变高度.如果我没有指定容器的高度,那么容器后面的任何内容都会消失.

目前我正在做以下事情,但我很高兴找到一个不那么费力的选择:

(容器有位置:relative,#main和#sidebar是position:absolute,#sidebar的内容没有指定位置)

CSS:

div#mapcontainer { position:relative; width:100%; height: 600px;  }
div#main { position:absolute; top: 0; left: 10px; width: 500px; height: 400px; }
div#sidebar { position:absolute; top:10px; right:10px; width: 155px; height: 405px;}

HTML:

<div id="container">
    <div id="main">variable height content here</div>
    <div id="sidebar">
       <div id="foo">...</div>
       <div id="bar">....</div>
       ...
    </div>
<div>

JS:

fixHeights = function() {   
    var children_height = 0;  
    $('#sidebar'). children().each(function(){children_height += $(this).height();});
    $('#container').height(Math.max(children_height, $('#main').height()));
};

Answer 1

这是一个非常奇怪的问题,因为div的高度总是它的孩子的高度.

你在容器div中浮动内容了吗？当您浮动子内容时,包含的div不再起作用.

如果您是浮动超出容器div底部的内容,请将以下div添加到容器div子项的最底部:

<div style="clear:both;"></div>

这将不允许儿童漂浮在它上面,从而迫使包含div成为其最高儿童的身高......

<div id="container">
  <div id="dynamic" style="float:left;width:100px;">dynamic content goes here</div>
  <div id="static" style="margin-left:104px;">Lots of static stuff here</div>
  <div style="clear:both;"></div>
</div>

好吧,我不确定你为什么要按照自己的方式进行定位,但我为一个看起来像桌面应用程序的网站做了类似的事情.除了使用javascript,我不相信有任何办法可以做到这一点.Html文档旨在流动,而不是僵化.如果你想在javascript上保释,你将不得不放弃定位样式并使用浮动和清除div.它并不那么可怕......

Answer 2

如果你是浮动容器div"溢出:自动"也可以神奇地工作,特别是关于整个IE hasLayout崩溃