Как сделать div со 100% height
При блочной вёрстке часто требуется сделать у блока div высоту 100%. Простым указанием height=100% в div не получится добиться желаемого результата, поэтому тут есть определённая методика, о которой я в этой статье расскажу.
Прежде чем приводить код, объясню принцип его работы. Его суть состоит в том, чтобы указывать height=100% у всех родительских блоков, в том числе, и у html. Например, вот этот код позволяет сделать div с высотой 100%:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV со 100% height</title>
<style type="text/css">
html, body {
height: 100%;
}
div {
height:100%;
background-color: #f00;
}
div div {
background-color: #0f0;
width: 50px;
}
</style>
</head>
<body>
<div>
<div>Текст</div>
</div>
</body>
</html>
В результате, оба div будут высотой 100%. Обратите внимание, что если убрать у html height 100%, то уже ничего не выйдет. Аналогично, если у верхнего div убрать height 100%, а у внутреннего оставить, то внутренний не будет со 100% высотой. То есть помните, чтобы сделать div со 100% height необходимо каждый родительский блок так же сделать со 100% высотой.
-
Создано 03.05.2013 12:01:09
-
Михаил Русаков
Комментарии (6):
Михаил, сделал как у Вас, но при удлинении блока center, правый блок не увеличивается <div id = "content"><div id = "center"></div><div id = "right"></div></div> html, body { height: 100%; } div#content { height: 100%; width: 100%; } div#center { float: left; width: 60%; height: 100%; } div#right { float: right; height: 100%; width: 40%; }
Ответить
Это вопрос не относится к данной статье. Чтобы сделать блоки одинаковой высоты, нужно задать для верхнего блока display: table;, а для внутреннего display: table-cell;
Ответить
Мне нужно, чтобы два внутренних юлока бы ли равны
Ответить
Читайте мой предыдущий комментарий для этого.
Ответить
Махаил! Попробовал предложенный метод - он работает, но с оговоркой, что блоки div, к которым задается высота 100% не должны быть вышиной больше окна браузера. Если блок не умещается по высоте в окне браузера, то блок не полностью окрасится фоновым цветом. Окрасится фоновым цветом только та часть блока, которая умещается в окне браузера. Вот код для примера. <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>DIV со 100% height</title> <style type="text/css"> html { height: 100%; } body { height: 100%; } div { height:100%; background-color: #f00; } div div { background-color: #0f0; width: 50px; } </style> </head> <body> <div> <div>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.</div> </div> </body> </html>
Ответить
Михаил, спасибо! Ваша статья мне очень помогла! А то я раньше делал это через яваскрипт.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.