Высота родительского div равна нулю, даже если у него есть ребенок с конечными высотами

У меня есть веб-сайт, макет которого показан на диаграмме. Тело состоит из main container, которое состоит из header, parent div и footer. parent div также содержит несколько child div, как показано.

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

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

Может ли кто-нибудь предложить мне способ, чтобы высота родительского div автоматически менялась в зависимости от высоты дочерних div.

Прошу прокомментировать, если я неясен, задавая свои сомнения!

Ответ 1

Похоже, вы получили случай для класса clearfix.

Итак, я предполагаю, что вы плаваете дочерний div и поэтому высота родительского div равна 0. Когда вы используете float, родитель не адаптируется к высоте детей.

Но добавив класс clearfix (конечно, вы должны иметь его в своей таблице стилей), он добавит '.' в конце (невидимым, конечно), и ваш родитель будет магически иметь правильную высоту.

Обратите внимание, что это кросс-платформа, совместимая IE6 +, Chrome, Safari, Firefox, вы называете это!

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Ответ 2

Попробуйте добавить в таблицу стилей следующее:

#parentdiv:after { 
    content: " "; 
    display: block;
    clear: both;
}

Как сказал Дэдал в своем комментарии, вы, вероятно, плаваете с дочерними div. Если это так, строка выше исправляет ее.

Проблема, когда вы плаваете, это то, что их родительский элемент "игнорирует" их.

Строка выше создает и вставляет (псевдо) элемент в #parentdiv, который проталкивается мимо всех плавающих div. Затем родительский div, который, несмотря на игнорирование плавающих дочерних элементов, не игнорирует этот псевдоэлемент - действуя так, как должен, он расширяется, чтобы содержать псевдоэлемент. Теперь, поскольку псевдоэлемент находится ниже всех перемещаемых дочерних элементов, родительский div происходит или, еще лучше, кажется, "содержит" также и плавающих детей, что и есть то, что вы хотите.