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

116

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

css css-float liquid-layout Нил Басу
источник

Ответы:

282

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

.c{
    ...
    overflow: hidden;
}

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

ОБНОВИТЬ

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

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

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

Nightfirecat
источник
8
По сути, добавление этого свойства заставляет внешний блок игнорировать правило плавающих контейнеров, в котором они не вычисляются по высоте для контейнеров, и применять их для всего фонового рисунка.
Nightfirecat
4
Вау, я подумал: «Что? Это не сработает». Но будь я проклят. Я полностью думал, что он не будет вести себя должным образом. Спасибо
тьфу
1
Разве это не хакерское дело? Для меня это побеждает цель переполнения. Я не понимаю, почему это правильный и наиболее популярный ответ.
Эндрю Вейр
3
@AndrewWeir Признаюсь, до сих пор я не был полностью уверен, почему этот метод расширения контейнеров для правильного учета поплавков в их размере работал. Согласно с несколькими источников , кажется , что это вызывает элемент , чтобы изменить свой режим рендеринга, от разрешения видимого переполнения не делать так, и при этом, это вынуждает элементы , чтобы запретить это переполнение.
Nightfirecat
2
Первый способ, использующий переполнение, у меня работает. Второй способ ТАКЖЕ работает и кажется менее рискованным на случай, если в будущем у меня возникнет переполнение. Я только хотел бы проголосовать дважды.
Тайлер Кольер,
28

Вы перемещаете детей, что означает, что они «плавают» перед контейнером. Для того, чтобы взять правильную высоту, вы должны «очистить» поплавок.

Div style = "clear: both" очищает плавающее значение и задает правильную высоту контейнера. см. 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>
Yoeri
источник
Это ясно: оба; вещь кажется правильным решением для высоты контейнера, потому что проблема заключается в плавающих дочерних элементах. Так что этот подход кажется лучше, чем overflow: hidden; один выше.
Ронни Депп
Спасибо @Yoeri за то, что поделился этим простым решением. Я ищу такое же решение для своего нового дизайна, так как прошло почти 6 лет с тех пор, как я последний раз разрабатывал веб-макет после того, как я сосредоточился исключительно на перспективе разработки PHP, а не на стороне дизайна.
Ронни Депп,
20

Не правда ли, проще?

.c {
    overflow: auto;
}
Антонио Ромеро Ока
источник
Да, это так: D. Спасибо
Алауддин Ахмед
4

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

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

подветренный
источник
3

Лучшее и самое пуленепробиваемое решение - это добавить в контейнер ::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;свойство, тогда вам не нужно добавлять clearfix.

Agata
источник