У меня есть элемент контейнера, который мне нужно изменить при изменении его содержимого. Он содержит 2 абсолютно позиционированных divs, которые могут изменять высоту. Если я не укажу высоту контейнера, тогда что-нибудь после того, как контейнер исчезнет под содержимым.
В настоящий момент я делаю следующее, но мне будет приятно найти менее трудоемкую альтернативу:
(контейнер имеет позицию: относительный, #main и #sidebar - позиция: абсолютная, содержимое #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()));
};