Не знаю как у кого, но у меня периодически возникают проблемы с тем, чтоб веб-страница занимала всю высоту экрана. У меня есть div, который я хочу, чтоб растягивался на всю высоту страницы. Но он не растягивается. Почему? Сегодня, я, вместе с вами, попробую в этом разобраться.

Допустим, у нас есть такой 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=ISO-8859-1" />

<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 tincidunt ut laoreet dolore magna aliquam erat volutpat. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.<br /><br />

Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.<br /><br />

Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus.<br /><br />

Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer in lorem id nibh luctus aliquam. Sed elementum, est ac sagittis porttitor, neque metus ultricies ante, in accumsan massa nisl non.

</div>

</body>

</html>



И такой CSS(в файле style.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%;

}



Вы можете открыть этот HTML в браузере, чтоб увидеть, что div не растянулся на всю высоту страницы, хотя мы и указали “height: 100%;” в CSS. Почему спросите вы?

Дело в том, что HTML это просто набор контейнеров, вложенных друг в друга. На нашей странице есть корневой контейнер <html>, в нем содержится <body>, а в нем, в свою очередь, контейнер <div id=”content”>. Когда мы помещаем контент в один из контейнеров, он(и все контейнеры его содержащие) растягиваются так, чтоб вместить свой контент. То есть, когда мы вставляем текст в <div id=”content”>, он растягивается, и соответственно растягивает все контейнеры в которых он находится(в нашем случаи <body> и <html>).

Когда мы добавляем правило “min-height: 100%;” к <div id=”content”>., мы по-сути указываем диву, что он должен растянуться на всю высоту содержащего его контейнера. В данном примере, это контейнер <body>. Таким образом, контейнер <div id=”content”> стал занимать 100% высоты контейнера <body>. Теперь возникает вопрос, а какой высоты контейнер <body>? На самом деле, такой как , поскольку другое не было указано! То есть, по сути, добавление стиля “min-height: 100%;” <div id=”content”> указывает ему быть такой же высоты, как он есть.

Таким образом, для того, чтоб добиться желаемого результата, необходимо увеличить высоту контейнера <body>. Тут мы сталкиваемся с той же проблемой в контейнере <html> – его высота равна высоте <body>! Таким образом, для того, чтобы исправить проблему (то есть заставить контейнер <div id=”content”> растянуться на всю высоту страницы), нам необходимо, указать контейнерам <html> и <body>, чтоб они занимали всю высоту страницы.

То есть, поменять 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%;

}



В результате получим, что содержимое займет всю высоту страницы. Важный факт, если содержимое имеет высоту большую, чем высота страницы, то появится полоса прокрутки. Для этого вместо height: 100%; в последней строчке использовано min-height: 100%;. В противном случаи, содержимое обрывалось бы в конце страницы.
0

Комментарии

Для того, чтоб оставлять комментарии или зарегистрируйтесь.