Как сделать чтобы блок увеличивался по высоте в зависимости от добавления будущего содержимого?

Вопрос-ответ HTML/CSS
1

Как сделать чтобы блок увеличивался по высоте в зависимости от добавления будущего содержимого? Нужно получить div с определенной высотой по умолчанию и при увеличении
объема содержимого его высота также должна увеличиваться (на примере http://jsfiddle.net/8gng79kL/ , но чтобы без линейки прокрутки). Можно такого добиться средствами CSS или без JS здесь не обойтись?

2

Изначально не нужно задавать высоту на блок
http://jsfiddle.net/8gng79kL/1/
Тогда все будет работать как надо

2 лайка
3

то есть - работает только в случае с псевдоклассом
.menu:after{
display:block;
clear:both;
content:"";
}
Не пойму как это работает
Еще как вариант нашла - вместо высоты overflow:hidden указать - работает тоже. Или лучше псевдокласс использовать?

4

Тут дело не в псевдоклассе, а в том, что внутри блока флотнутые элементы, которые ломают лейаут родителя. Он как бы схлопывается, поэтому возникают проблемы с высотой. Оба приема (и псевдокласс, и overflow:hidden) делают одно и то же - восстанавливают этот лейаут. Просто overflow:hidden может привести к проблемам в будущем, если нужно будет что-то выносить за пределы блока (на абсолюте, например). Поэтому я использовала псевдокласс.
Если заменить float на лишках на display:inline-block, и убрать мой псевдокласс, то тоже все будет работать нормально.

4 лайка