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

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

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

UPDATE: ссылка для разработки уже недействительна, поэтому я удалил ее. Достаточно сказать, что подробное объяснение Animuson является ценной частью этого потока и решило проблему не расширения контейнеров в соответствии с их контентом. - Ty

Ответ 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;
}

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

Учитывая этот зеленый квадрат, который имеет прописку 20px (для видимости), обратите внимание, как один красный прямоугольник, плавающий влево, будет расширяться за границей родительского поля. Это связано с тем, что плавающее содержимое фактически не занимает какое-либо "пространство" в визуальной области. Все остальные элементы будут расширяться под ним, и только текст обернется вокруг него.

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

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

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

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

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

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

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

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

Ответ 2

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

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

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

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

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

Ответ 3

Если вам нужно использовать переполнение: видимо по какой-либо причине, существует другой способ заставить контейнер растягиваться, чтобы содержать весь плавающий контент. Вы должны очистить элемент: как в качестве последних элементов контейнера. Если вы игнорируете древние IE (< 8), вы можете сделать это с помощью очень простого css (vide https://css-tricks.com/snippets/css/clear-fix/):

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

Ответ 4

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

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

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

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

Ответ 5

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

Ответ 6

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