div height 100 (CSS)

Чтобы растянуть тег <div> на 100% в высоту, все верстальщики сразу указывают height:100% и ждут что слой будет растянут на весь экран, однако див оказывается размером в несколько пикселей в высоту.

Чтобы растянуть див на весь экран, нужно чтобы выполнялось одно условие — родительский слой должен быть растянут на весь экран. В данном случае родительский слой — это теги <body> и <html>. Для этого устанавливаем CSS-значение height:100% у этих тегов и только затем ставим его у дива.

Пример

Нужно разместить изображение (http://expange.ru/i/expange.gif), по центру экрана. В IE6 результат так же должен быть height:100%.

Онлайн-пример

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>DIV HEIGHT 100% CSS</title> <style type="text/css"> html, body {height: 100%; width: 100%; margin:0; font-family:"Trebuchet MS", sans-serif;} div {height:100%; width:100%; background:url(http://expange.ru/i/expange.gif) no-repeat center center;} h1 {margin:0; padding:5px 10px;} </style> </head> <body> <div><h1>DIV HEIGHT 100% CSS</h1></div> </body> </html>

Как вы успели заметить типа документа HTML5. Тестировалось так же в HTML4 и в XHTML, результат везде один и тот же. В IE6 ошибок не обнаружено.

Категории

Веб-дизайнCSS

Читайте также

Комментарии