Блог

Главная - Вопросы по программированию - CSS контейнер div не получает высоту

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

#css #css-float #liquid-layout

#css #css-float #жидкий макет

Вопрос:

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

Ответ №1:

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

 .c{
    ...
    overflow: hidden;
}

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

Обновить

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

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

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

Комментарии:

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

2. Вау, я такой: «Что? это не сработает «. Но я буду проклят. Я полностью думал, что это не будет вести себя должным образом. Спасибо

3. Разве это не довольно хакерски на самом деле? Для меня это противоречит цели переполнения. Я не понимаю, почему это правильный и наиболее одобренный ответ.

4.@AndrewWeir Я признаю, что до сих пор я не был полностью уверен, почему этот метод расширения контейнеров для правильного учета поплавков в их размере работает. Согласно нескольким источникам, кажется, что это заставляет элемент изменять свой режим рендеринга, с разрешения видимого переполнения на не выполнение этого, и при этом это заставляет элементы запрещать это переполнение.

5. Первый способ, использующий переполнение, работает для меня. Второй способ ТАКЖЕ работает и кажется менее рискованным на случай, если у меня будет переполнение в будущем. Я только хотел бы проголосовать дважды.

Ответ №2:

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

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>

Комментарии:

1. Это ясно: оба; кажется, что это правильное решение для высоты контейнера, потому что проблема заключается в плавающих дочерних элементах. Таким образом, этот подход кажется лучше, чем overflow: hidden; один выше.

2. Спасибо @Yoeri за то, что поделились этим простым решением. Пальцы вверх! Я ищу то же решение для своего нового дизайна, поскольку прошло почти 6 лет с тех пор, как я в последний раз разрабатывал веб-макет после того, как я сосредоточился исключительно на перспективе разработки PHP, а не на стороне дизайна.

Ответ №3:

Это не так просто?

 .c {
    overflow: auto;
}

Комментарии:

1. Да, это так: D. Спасибо

Ответ №4:

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

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

Ответ №5:

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

Ответ №6:

Я столкнулся с этой же проблемой, и я придумал четыре жизнеспособных решения:

  1. Создайте контейнер display: flex; (это мое любимое решение)
  2. Добавить overflow: auto; или overflow: hidden; в контейнер
  3. Добавьте следующий CSS для контейнера:
 .c:after {
    clear: both;
    content: "";
    display: block;
}
  1. Сделайте следующее последним элементом внутри контейнера:
 <div style="clear: both;"></div>