100% Height разметка с использованием CSS

По следам публикации: 100% Height Layout Using CSS

Может я чего упустил, но раньше такого элегантного решения не встречал.

Dave Woods делится довольно простым, но очень полезным хаком о том, как написать разметку, которая будет занимать 100% высоты окна Вашего браузера. Минимализм и простота решения заслуживают внимания. Решение работает в IE6, IE7, Firefox, Opera(до 10-ки), Safari.

Собственно, меньше слов, больше дела. Вот пример кода:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<style>
* {
    padding: 0; margin: 0;
}

html, body {
    height: 100%;    
}
#container {
    min-height: 100%;
    background-color: #DDD;
    width: 250px;
    margin: 0 auto;
}
* html #container {
    height: 100%;
}

p {
    text-align: center;
}
</style>
</head>

<body>
<div id="container">
<p>It's great,<br />I have an 100% height!</p>
</div>
</body>

Собственно ценным здесь является сам хак для IE6, который заключается в следующем коде:

* html #container {
  height: 100%;
}

А вот здесь Dave дает возможность посмотреть свою работу в действии.

Статья закончилась, но Вы можете:

- сказать спасибо автору:

- поделиться статьей с друзъями: - прокомментировать статью: Комментарии (12)

12 Комментариев на статью: “100% Height разметка с использованием CSS”

Константин:

11 Сентябрь, 2009 в 12:14

Видимо, я что-то не то курю….
У меня в опере 10 документ по ссылке ну никак не хочет принимать высоту 100%.

Ответить

admin:

11 Сентябрь, 2009 в 15:33

Ну вот, повод скачать 10-ку. Курите Вы то-что надо, в 10-ке не работает.
Когда была написана статья 10-ки небыло, в 9-ой все ОК.
Видимо у новой оперы свои тараканы и надо брать другой напильник.

Ответить