it-swarm.com.ru

CSS контейнер div не получает высоту

Я хочу, чтобы мой контейнерный контейнер получал высоту максимума своего детского роста. не зная, какой высоты будет иметь ребенок divs. Я пытался на JSFiddle . Контейнер div выделен красным. который не появляется Зачем?

113
Neel Basu

Добавьте следующее свойство:

.c{
    ...
    overflow: hidden;
}

Это заставит контейнер соблюдать высоту всех элементов внутри него, независимо от плавающих элементов.
http://jsfiddle.net/gtdfY/3/

Обновление

Недавно я работал над проектом, который требовал этого трюка, но должен был разрешить отображение переполнения, поэтому вместо этого вы можете использовать псевдоэлемент для очистки ваших float, эффективно достигая того же эффекта, допуская переполнение для всех элементов.

.c:after{
    clear: both;
    content: "";
    display: block;
}

http://jsfiddle.net/gtdfY/368/

275
Nightfirecat

Вы плаваете детей, что означает, что они "плавают" перед контейнером. Чтобы взять правильную высоту, вы должны "очистить" поплавок

Div style = "clear: both" очищает плавающее an и дает правильную высоту контейнера. смотрите http://css.maxdesign.com.au/floatutorial/clear.htm для получения дополнительной информации о поплавках.

например.

<div class="c">
    <div class="l">

    </div>
    <div class="m">
        World
    </div>
    <div style="clear: both" />
</div>
27
Yoeri

Не проще ли?

.c {
    overflow: auto;
}
19
Antonio Romero

Попробуйте вставить этот очищающий div перед последним </div>

<div style="clear: both; line-height: 0;">&nbsp;</div>

4
lee

Лучшим и наиболее пуленепробиваемым решением является добавление псевдоэлементов ::before и ::after в контейнер. Так что если у вас есть, например, список вроде:

<ul class="clearfix">
    <li></li>
    <li></li>
    <li></li>
</ul>

И каждый элемент в списке имеет свойство float:left, тогда вы должны добавить в свой CSS:

.clearfix::after, .clearfix::before {
     content: '';
     clear: both;
     display: table;
}

Или вы можете попробовать свойство display:inline-block;, тогда вам не нужно добавлять какие-либо исправления.

1
Agata