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%;}.
Использованы материалы статьи
Комментарии к статье
Просто и доходчиво! Спасибо.
зачем то в примере глупо стоит запрет на копирование,но далеко не всегда такое помогает
что еще за запрет на копирование, любопытно?
Почему-то у меня это не сработало :(
Повнимательнее к блокам, которым нужно добавить 100%, и все сработает
Спасибо.
Все ок, див растягивается. Но вот если контента больше, чем экран -- фон прерывается. Минимальная высота в 100% не помогает
А по-моему все эти КОСТЫЛИ - лишний повод отказаться или частично отказаться от .... CSS.
Для справки, таблицами, которые вы все ненавидите, это решается проще простого, как и прижатие футера к низу страницы, таблицу можно использовать только для каркаса, а все мелочи уже дивами.
это не костыли, а просто верстка ....хотите верстать таблицами - в путь дорогу
А как сделать когда при height 100% изменяешь высоты браузера контент не сжиался, если внутри него блоки тоже в процентах?
В последнем DEMO высота растянулась за счет большого контента, а не за счет свойтсва height:100%.
Вы оставте две строчки контента, задайте бэкграунд и тогда посмотрите, что получиться.
Пустой див на всю высоту экрана не растянется.
Anna, все растягивается...поставьте себе firebug, если он у вас не стоит, и сами проверьте
опечатка в конце " которые не понимают свойство min-heigt, для них необходимо"
Однако, если взять больше слоев, то уже не работает. Родительский div не растягивается
Алина, в статье все описано - для каждого конкретного слоя должна быть задана высота. или на флексбоксах сделайте, хотя это плохая практика
dnzl, Вы попробуйте слой добавить. На самом деле не работает, если больше слоев взять. Даже если указывать высоту, как у Вас описано.
lina, все работает, если высоту указывать
спасибо большое за простое решение