Дизайн контейнера CSS не набирає висоти

116

Я хочу, щоб мій контейнерний дів отримав висоту максимуму висоти своїх дітей. не знаючи, якого зросту мати дитина 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/

— Нічний вогник
джерело

8

В основному, додавання цієї властивості змушує зовнішню скриньку ігнорувати правило, яке мають плаваючі контейнери, де вони не обчислюються по висоті для контейнерів, і застосовувати їх для повного малюнка фону.

— Nightfirecat

4

Нічого собі, мені здавалося: "Що? Це не спрацює". Але я буду зануджений. Я повністю вважав, що не буде поводитися належним чином. Дякую

— fie

1

Хіба це не зовсім хакі? Для мене це перемагає мету переповнення. Я не розумію, чому це правильна і найбільш схвалена відповідь.

— Ендрю Вейр

3

@AndrewWeir Я визнаю, до цього часу я не був повністю впевнений, чому цей метод розширення контейнерів правильно вважає поплавці за їх розмірами. За даними декількох джерел , схоже, що це призводить до того, що елемент змінює свій режим візуалізації, дозволяючи видимому переповненню не робити цього, і, роблячи це, це змушує елементи заборонити цей перелив.

— Nightfirecat

2

Перший спосіб, використовуючи переповнення, працює для мене. Другий спосіб ТАКОЖ працює і здається менш ризикованим у випадку, якщо в майбутньому у мене є переповнення. Я б тільки хотів, щоб я міг проголосувати двічі.

— Тайлер Колліер

28

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

Стиль div = "ясно: обидва" очищає плаваючий ан надає контейнеру правильну висоту. див. 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 за спільне використання цього простого рішення. Я шукаю те саме рішення для свого нового дизайну, як минуло майже 6 років, як я останній раз розробив веб-макет після того, як я зосередився лише на перспективі розробки PHP, а не на дизайнерській стороні.

— Ронні Депп

20

Чи не так простіше?

.c {
    overflow: auto;
}

— Антоніо Ромеро Ока
джерело

Так, це: D. Спасибі

— Алауддін Ахмед

4

Спробуйте вставити цей очищаючий div до останнього </div>

<div style="clear: both; line-height: 0;"> </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;властивість, тоді вам не потрібно додавати явні виправлення.

— Агата
джерело