Установка высоты блока в 100%

Часто требуется установить высоту блока в 100% окна браузера. Делают это к примеру для того, чтобы после по центру разместить контент, или прижать к низу этого блока footer.

Можно установить для нужного блока height: 100%; и это будет работать без DOCTYPE.

<html>
<head>
<style type="text/css">
body {
    margin: 0;
    padding: 0;
}
.height-100 {
    border: 1px dotted red;
    height: 100%;
}
</style>
</head>
<body>

<div  class="height-100">
Content
</div>

</body>
</html>

<html>

<head>

body {

margin: 0;

padding: 0;

}

.height-100 {

border: 1px dotted red;

height: 100%;

}

</style>

</head>

<body>

Content

</div>

</body>

</html>

Но если установлен DOCTYPE, к примеру

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

1 2	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

то браузеры начинают рендерить страницы по стандартам. Высота блока будет равняться высоте контента.
Для исправления этой проблемы устанавливаем высоту для html и body в 100%.
Пример

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body {
    height: 100%;
}
body {
    margin: 0;
    padding: 0;
}
.height-100 {
    border: 1px dotted red;
    height: 100%;
}
</style>
</head>

<body>

<div  class="height-100">
    Content
</div>

</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

html, body {

height: 100%;

}

body {

margin: 0;

padding: 0;

}

.height-100 {

border: 1px dotted red;

height: 100%;

}

</style>

</head>

<body>

Content

</div>

</body>

</html>

В этом случае height блока будет 100%;

16.11.2010 00:02

Comment (RSS) | Обратная ссылка

Понравилось? Поделись с другими плз

Комментарии ВКонтакте

Комментарии с сайта

ilnaz:

27.07.2012 в 02:36

благодарю! очень помогло!:-)

Ответить
Дмитрий:

02.08.2012 в 15:45

Спасибо за такое простое, но нужное решение

Ответить
azz:

15.07.2015 в 16:57

коротко и ясно, респект

Ответить

Ответить azz

Нажмите, чтобы отменить ответ.