При блочной вёрстке часто требуется сделать у блока div высоту 100% . Простым указанием height=100% в div не получится добиться желаемого результата, поэтому тут есть определённая методика, о которой я в этой статье расскажу.

Прежде чем приводить код, объясню принцип его работы. Его суть состоит в том, чтобы указывать height=100% у всех родительских блоков , в том числе, и у html . Например, вот этот код позволяет сделать div с высотой 100% :

В результате, оба div будут высотой 100% . Обратите внимание, что если убрать у html height 100% , то уже ничего не выйдет. Аналогично, если у верхнего div убрать height 100% , а у внутреннего оставить, то внутренний не будет со 100% высотой. То есть помните, чтобы сделать div со 100% height необходимо каждый родительский блок так же сделать со 100% высотой .

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Комментарии (6 ):

03.05.2013 20:37:02

Михаил, сделал как у Вас, но при удлинении блока center, правый блок не увеличивается

Ответить

03.05.2013 21:55:51

Махаил! Попробовал предложенный метод - он работает, но с оговоркой, что блоки div, к которым задается высота 100% не должны быть вышиной больше окна браузера. Если блок не умещается по высоте в окне браузера, то блок не полностью окрасится фоновым цветом. Окрасится фоновым цветом только та часть блока, которая умещается в окне браузера. Вот код для примера.

text style css (4)

Без содержимого высота не имеет значения для вычисления процента. Однако ширина будет принимать процент от DOM, если ни один из родителей не указан. (Используя ваш пример) Размещение второго div внутри первого div, получило бы результат... пример ниже...

Второй div будет 30% от высоты первого div.

Почему процентное значение для height не работает, но процентное значение для width ?

Ширина #working составляет 80% от области просмотра, но высота #not-working заканчивается 0.

Вам нужно дать ему контейнер с высотой. width использует область просмотра как ширину по умолчанию

Другой вариант - добавить стиль в div

И это означает, что элемент расположен относительно ближайшего расположенного предка.

Процентное значение в свойстве height имеет небольшое усложнение, и свойства width и height фактически ведут себя по-разному друг к другу. Позвольте мне взять вас на экскурсию по спецификациям.

height:

содержащего сгенерированный блок . Если высота содержащего блока явно не указана (т. Е. Зависит от высоты содержимого), и этот элемент не является абсолютно позиционированным, значение вычисляется в «auto». Процентная высота на корневом элементе относительно начального содержащего блока . Примечание. Для абсолютно позиционированных элементов, содержащий блок, основанный на элементе уровня блока, процент вычисляется относительно высоты поля заполнения этого элемента.

Хорошо, давайте сделаем это шаг за шагом:

Процент вычисляется относительно высоты блока, содержащего сгенерированный блок .

Процент вычисляется по ширине блока сгенерированного блока.

Взгляните на эти знакомые примеры, переделанные из предыдущего, чтобы изменить width вместо height:

• 50% width:200px 200 пикселей - 100 пикселей в случае #cc
• 50% width:auto составляет 50% от любой width:auto заканчивается, в отличие от height , нет специального правила, которое обрабатывает этот случай по-разному.

Теперь вот сложный бит: auto означает разные вещи, в зависимости от того, был ли он указан для width или height ! Для height это просто означает высоту, необходимую для соответствия содержимому *, но для width auto на самом деле сложнее. Вы можете видеть из фрагмента кода, который в этом случае оказался шириной окна просмотра.

Ширина зависит от значений других свойств. См. Разделы ниже.

Вай, это не полезно. Чтобы избавить вас от неприятностей, я нашел вам соответствующий раздел в нашем прецеденте, озаглавленный «Расчет ширины и полей», подзаголовок «блок-уровень, неизменяемые элементы в нормальном потоке» :

Среди используемых значений других свойств должны быть следующие ограничения:

"margin-left" + "border-left-width" + "padding-left" + "width" + "padding-right" + "border-right-width" + "margin-right" = ширина содержащего блока

ОК, поэтому width плюс соответствующие границы, границы и границы заполнения должны суммироваться с шириной содержащего блока (а не потомками, как работает height). Еще одно предложение:

Если для «width» установлено значение «auto», любые другие значения «auto» становятся «0» и «width» следует из полученного равенства.

Ага! Таким образом, в этом случае 50% width:auto составляет 50% окна просмотра. Надеюсь, что все, наконец, имеет смысл сейчас!

* По крайней мере, насколько это важно в этом случае. spec Хорошо, теперь все только имеет смысл.

Описание

Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств height , max-height и min-height . В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

Данные из таблицы следует понимать следующим образом. Если значение высоты (height ) больше значения max-height , то высота элемента принимается равной значению max-height .

Синтаксис

max-height: значение | проценты | none | inherit

Значения

В качестве значений принимаются пикселы (px), проценты (%) и другие единицы измерения, принятые в CSS. Отрицательные значения не допускаются.

None Отменяет действие этого свойства. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Результат использования свойства max-height

Объектная модель

document.getElementById("elementID ").style.maxHeight

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .