Почему высота контейнера не обновлялась?

Question

Я добавляю элементы в контейнер div, высота которого сначала «авто». Я ожидаю, что его высота будет обновляться по мере добавления дочерних элементов. Но на самом деле нет. Может кто-нибудь мне помочь? Я просто хочу, чтобы высота контейнера была обновлена ​​в соответствии с высотой детей.

Я использовал инструмент для отладки хрома, высота контейнера div меньше высоты детских div. Дети divs плавают: слева.

Answer 1

Если вы добавляете детей с плавающей точкой в ​​div, вам нужно иметь overflow:auto; для родителя.

Вы также можете использовать другой элемент для очистки поплавка clear:both.

Это связано с тем, что элементы флотации вынимаются из потока документов.

Вот пример, который показывает вам несколько методов, которые можно использовать: http://jsfiddle.net/Tn5c3/

The CSS

#a, #b { 
    padding: 10px; 
    margin:10xp 
} 

#a { 
    background: #aa0000; 
} 
#b { 
    background: #00aa00; 
    overflow: auto; 
} 
p { 
    background: #0000aa; 
    padding: 5px; 
} 

.clear { 
    clear:both; 
    height: 50px; 
} 

The JS

$('#bb').click(function() { 
    addChild($('#b')); 
}); 

$('#ba').click(function() { 
    addChild($('#a')); 
}); 


function addChild(parent) { 
    var child = $('<p>floated para</p>').css({ 
     'float': 'left' 
    }); 
    parent.append(child); 
} 

HTML-

<button id='ba'>Add to A</button> 
<button id='bb'>Add to B</button> 


<div id='a'></div> 
<div class='clear'></div> 
<div id='b'></div>