Как изменить размер контейнера div до общей высоты его дочерних элементов?

Question

У меня есть элемент контейнера, размер которого необходимо изменить по мере изменения его содержимого. Он содержит 2 абсолютно позиционированных элемента div, которые могут изменять высоту. Если я не укажу высоту контейнера, то что-либо после контейнера исчезнет под содержимым.

В данный момент я делаю следующее, но я был бы рад найти менее трудоемкую альтернативу:

(контейнер имеет позиции: относительные, #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>

ЯШ:

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 "overflow: auto" также может работать магическим образом, особенно в отношении всей проблемы IE hasLayout

Answer 3

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

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

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

Answer 4

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

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

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

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

Answer 5

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