Расширение родительского контейнера с высотой 100% для учета плавающего содержимого

Question

Я борюсь с клиентским проектом. Все мои div s не имеют абсолютного позиционирования, height:100% для html, body и контейнера div s, и все же статическое содержимое не дотягивает до своего содержимого (при 910px).

Я могу изменить свойство переполнения на auto, и фон продолжится до конца содержимого, но к нему добавится полоса прокрутки, а нижняя граница статического содержимого div останется прежней. место (в 910 пикселей).

ОБНОВЛЕНИЕ: ссылка для разработки больше не действительна, поэтому я удалил ее. Достаточно сказать, что подробное объяснение Animuson является ценной частью этой цепочки, и оно решило проблему контейнеров, не расширяющихся в соответствии с их содержимым. - Ты

Answer 1

Вы использовали неправильное свойство overflow-y для очистки, и вы должны установить min-height вместо обычной высоты. Попробуйте это:

#static-content {
    background-color: #FFFFFF;
    margin: 0 auto;
    min-height: 100%; /* Set to minimum height so overflow doesn't get hidden */
    overflow-y: hidden; /* HIDE overflow; I know, it doesn't make much sense */
    position: relative;
    width: 960px;
}

Плавающий контент сам по себе

Учитывая, что этот зеленый прямоугольник имеет отступ 20 пикселей (для наглядности), обратите внимание, как одиночный красный прямоугольник, плавающий влево, будет расширяться за пределы своего родительского прямоугольника. Это потому, что плавающий контент на самом деле не занимает «пространство» в визуальной области. Все остальные элементы развернутся под ним, и только text обернется вокруг него.

Очистка плавающего содержимого в родительском

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

Расширение родителя до 100% высоты

Вы можете подумать, что простое добавление height: 100% - это самый простой способ развернуть его туда, где он должен быть. Однако свойство height определяет абсолютную высоту. Поскольку плавающий контент на самом деле не занимает вертикальное пространство, наше свойство overflow: hidden обрезает весь контент, который превышает высоту родительского элемента.

Использование минимальной высоты вместо

Поскольку мы хотим, чтобы он расширился до по крайней мере высоты 100%, мы можем использовать свойство min-height, чтобы переместить его туда, и при этом поддерживать «автоматическую» высоту, необходимую для создания родительского зеленого поля. полностью охватывают дочернюю красную коробку, позволяя ей преодолеть 100% только тогда, когда это необходимо.

Как вы были настроены

Все элементы по умолчанию установлены на overflow: visible, чтобы свойство ничего не меняло. Единственное отличие, которое вы имели между этим и первым приведенным мною примером, заключалось в том, что у вас установлено height: 100% для элемента. Таким образом, родительский элемент расширялся до 100% высоты, но все еще не охватывал всю высоту своего красного дочернего блока.

Answer 2

Если вам по какой-то причине нужно использовать overflow: visible, есть другой способ заставить контейнер растягиваться, чтобы содержать весь перемещаемый контент.Вы должны поместить элемент с clear: оба как элементы последнего контейнера.Если вы игнорируете древние IE (<8), вы можете сделать это с очень простым css (смотри <a href="https://css-tricks.com/snippets/css/clear-fix/" rel="nofollow">https://css -tricks.com / snippets / css / clear-fix / ):

.your-container:after {
  content: "";
  display: table;
  clear: both;
}

Answer 3

Если высота: 100% не подходит для вас, вы можете попробовать эту функцию calc из CSS3:

/* Firefox */
height: -moz-calc(100%);
/* WebKit */
height: -webkit-calc(100%);
/* Standard */
height: calc(100%);

Вы можете попробовать это либо с высотой, либо с минимальной высотой, как уже говорилось. Вы можете с помощью этого калькулятора функции и другие вычисления, такие как:

 height: -moz-calc(100% - 50px);

И это иногда очень полезно, как вы можете догадаться.

Answer 4

height:100% - это высота контента, который течет с вашим контейнером под рукой и не учитывает ваш плавающий контент, поэтому высота вашего контейнера останавливается.Удалите его и очистите контейнер правильно, чтобы очистить всплывающие элементы, и он будет работать:

#static-content:before, #static-content:aftr {
 display:table;
 content:"";
}

#static-content:after {
 clear:both;
}

#static-content {
 zoom:1; /*ie fix*/
}

Answer 5

ПРОЧИТАЙТЕ ОТВЕТ !!! - Ладно, у меня возникла та же проблема, все, что было нужно, это удалить стиль «Позиционирование». Должно работать отлично.

Answer 6

У вас есть float in static-maincontent, который удаляет его из обычного потока содержимого документа, и, следовательно, static-content больше не заботится о его высоте и поэтому не будет расширяться донакрой это.Кроме того, удалите height:100% для static-content.