Оглавление скрыть


Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


div height 100 (CSS)

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

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

Пример

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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 ошибок не обнаружено.

Опубликовано: 12 октября 2011  ·  Автор: Артём Фёдоров  ·  4753 просмотра

Категория

ГлавнаяВеб-дизайнCSSdiv height 100 (CSS)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

CSS, Веб-дизайн

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания