3DM-студия

Как сделать div со 100% height

Как сделать div со 100% height


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

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




DIV со 100% height

html, body {
height: 100%;
}
div {
height:100%;
background-color: #f00;
}
div div {
background-color: #0f0;
width: 50px;
}




Текст




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


Скачивание доступно только для зарегистрированных
НАШИ НОВОСТИ
Опубликовано 04 апрель 2014
Представляю вашему вниманию шаблон онлайн кинотеатра с глубокой настройкой под свои нужны OST-ARENA.RU Читать далее...
Опубликовано 18 март 2014
Представляю вашему вниманию, адаптивный новостной шаблон Reades News. Адаптивный дизайн подразумевает, что шаблон будет одинаково корректно отображаться во всех устройствах. Шаблон отлично подойдет для медийных новостей и не только. Обязательно посмотрите видеозапись работы Читать далее...
Опубликовано 16 март 2014
Дизайн Zerotheme, адаптирован для DLE 10.1 by Yurets. Шаблон zBoomMusic позиционируется как шаблон для музыкального портала или музыкального блога. Вверху шаблона расположен слайдер, под слайдером Топ новостей, далее последние добавленные новости. Читать далее...