Как изменить размер контейнера div на общую высоту его детей?

У меня есть элемент контейнера, который мне нужно изменить при изменении его содержимого. Он содержит 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()));
};

Ответы

Ответ 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. Его не , что ужасно...

Ответ 2

если вы плаваете в контейнере div "overflow: auto" также может работать магически, esp в отношении всего IE hasLayout фиаско

Ответ 3

Вы не указали, но я думаю, что у вас проблема с плавающими элементами, и вы хотите, чтобы контейнер, в котором они находятся, был как минимум размером с самым большим плавающим элементом. Вы должны попробовать следующий хакер CSS, который заставляет браузер повторно отображать размер элемента контейнера в размере плавающих элементов:

#wrapper:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

Сообщите мне, что вы придумали, и если это сработает. В зависимости от вашего браузера есть много других хакеров.

Ответ 4

Я бы попробовал изменить css, чтобы не использовать абсолютное позиционирование. В Firefox вам нужно использовать упоминание об обертке в комментариях, чтобы получить правильную высоту mapcontainer.

div # mapcontainer {clear: both; ширина: 100%; мин-высота: 600 пикселей; }

div # main {float: left; margin-left: 10px; ширина: 500 пикселей; высота: 400 пикселей; }

div # sidebar {float: left; Запас-топ: 10px; Маржа направо: 10px; ширина: 155 пикселей; высота: 405px;}

Ответ 5

Overflow:visible; Это билет. overflow:auto при необходимости создаст полосу прокрутки.