Открыть меню    

CSS 100% высота

Я всегда сталкиваюсь с затруднениями, когда необходимо растянуть блок на 100% высоты страницы. Например, у меня есть блок div, который необходимо растянуть, однако все немного сложнее, чем кажется. Итак, почему бы не найти кроссбраузерное решение по растягиванию блока на всю высоту страницы? Сегодня мы попытаемся найти это решение.

Скажем, у вас есть html-файл наподобие такого:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=windows-1251" />

<title>CSS 100% Height</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis 
nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea 
commodo consequat. Duis 
autem vel eum iriure dolor in hendrerit in vulputate velit 
esse molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero eros et accumsan et iusto odio dignissim 
qui blandit praesent luptatum zzril delenit 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit, sed diam nonummy nibh euismod .....

короче много контента

</div>
</body>
</html>

К нему прилагается CSS:

CSS

body {
	margin: 0;
	padding: 0;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	height: 100%;
} 

Что это нам дает, вы можете увидеть перейдя по:

растягиваем блок на всю высоу окна браузера

Как вы можете видеть, высота страницы определяется контентом и не растягивается на 100%, несмотря на то, что мы добавили блоку #content свойство height со значением 100%. Как так? Давайте немного поразмышляем об HTML. HTML – это всего лишь куча контейнеров вложенных один в другой. Итак, у нашей страницы сперва идет контейнер html, затем внутри контейнера html лежит контейнер body, ну и, наконец, в body расположен блок с идентификатором content. Когда мы помещаем контент в один из этих блоков, он растягивает этот блок и все другие блоки, содержащие этот блок. Итак, мы растягиваем блок <div id=«content»>, когда помещаем в него текст, этим, в свою очередь, мы растягиваем другие блоки (в нашем случае это блоки body и html).

Добавляя блоку <div id=«content»> объявление height: 100%, мы говорим: блок div id=«content» нужно растянуть на всю высоту блока-родителя. В нашем примере, как вы понимаете, этим блоком-родителем является тег body. Итак, высота блока div id=«content» равна полной высоте (100%) тега body. Хорошо, но какая высота у тега body? Все просто: высота тега body равна высоте блока <div id=«content»>, которую мы нигде не задавали! Поэтому, когда мы создаем объявление height: 100%, мы просто говорим: блок по высоте должен быть равен самому себе!

Чтобы исправить это, нам нужно назначить тегу body свою высоту. Но мы снова столкнемся с той же проблемой, ведь тег body лежит в теге html. Таким образом, чтобы растянуть блок <div id=«content»> на всю высоту окна браузера, нам необходимо тегам body и html задать высоту, которая соответствовала бы полной высоте страницы.

CSS

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	min-height: 100%;
}

/*   специально для IE   */
* html #content  {
height: 100%;
}

И на этом все. Посмотрите demo. Блок с контентом растягивается на всю высоту окна браузера.

Обратите внимание на объявление min-height:100%;: благодаря нему в случае, если контент выходит за пределы окна браузера, фон также будет растягиваться за контентом.

Не забываем и о старых браузерах IE, которые не понимают свойство min-heigt, для них необходимо добавить * html #content {height: 100%;}.

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

Комментарии к статье

аватарка пользователя
2012-09-01
Константин

Просто и доходчиво! Спасибо.

аватарка пользователя
2012-11-11
Сергей

зачем то в примере глупо стоит запрет на копирование,но далеко не всегда такое помогает

аватарка пользователя
2012-11-12
dnzl

что еще за запрет на копирование, любопытно?

аватарка пользователя
2013-01-09
Петр

Почему-то у меня это не сработало :(

аватарка пользователя
2013-02-15
Костя

Повнимательнее к блокам, которым нужно добавить 100%, и все сработает

аватарка пользователя
2013-09-23
Гость

Спасибо.

аватарка пользователя
2013-10-08
Олег

Все ок, див растягивается. Но вот если контента больше, чем экран -- фон прерывается. Минимальная высота в 100% не помогает

аватарка пользователя
2013-12-11
Philipp

А по-моему все эти КОСТЫЛИ - лишний повод отказаться или частично отказаться от .... CSS.
Для справки, таблицами, которые вы все ненавидите, это решается проще простого, как и прижатие футера к низу страницы, таблицу можно использовать только для каркаса, а все мелочи уже дивами.

аватарка пользователя
2013-12-11
dnzl

это не костыли, а просто верстка ....хотите верстать таблицами - в путь дорогу

аватарка пользователя
2013-12-13
Дмитрий

А как сделать когда при height 100% изменяешь высоты браузера контент не сжиался, если внутри него блоки тоже в процентах?

аватарка пользователя
2014-07-09
Anna

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

аватарка пользователя
2014-07-09
dnzl

Anna, все растягивается...поставьте себе firebug, если он у вас не стоит, и сами проверьте

аватарка пользователя
2014-09-12
Руслан

Подскажите, как быть в такой ситуации?
https://dl.dropboxusercontent.com/u/5574961/2014-09-02%2016.20.09.png
я имею в виду в смартфонах все плохо

аватарка пользователя
2014-11-13
Иван

опечатка в конце " которые не понимают свойство min-heigt, для них необходимо"

аватарка пользователя
2016-08-23
Алина

Однако, если взять больше слоев, то уже не работает. Родительский div не растягивается

аватарка пользователя
2016-08-23
dnzl

Алина, в статье все описано - для каждого конкретного слоя должна быть задана высота. или на флексбоксах сделайте, хотя это плохая практика

аватарка пользователя
2016-10-17
lina

dnzl, Вы попробуйте слой добавить. На самом деле не работает, если больше слоев взять. Даже если указывать высоту, как у Вас описано.

аватарка пользователя
2016-10-17
dnzl

lina, все работает, если высоту указывать

аватарка пользователя
2017-01-20
Pavel

спасибо большое за простое решение

Добавить комментарий