расставляй правильно приоритеты и не отвлекайся на мелочи

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 дает возможность посмотреть свою работу в действии.

16 комментариев на статью:
  1. Константин:

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

    • admin:

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

  2. Рустам:

    Вы знаете, у меня стоит Опера 9.64, и там тоже не работает.

  3. Пётр:

    Спасибо. У меня заработало!

  4. Бодя:

    У меня опера 10.10, все работает. Бля буду, токо что еще раз проверил

  5. Владимир:

    сделал но че то я не особо вижу результата

  6. Артем:

    Автор, +1000, спасибо !!!!!!
    да прибудет с тобою счастье !!!

  7. Алексей:

    Спасибо! То что нужно! Просто и элегантно!

  8. warmer:

    Opera 10.62 — работает. IE 6, 7, 8 работает, автору +, почти гениально =)

  9. bookworm:

    Это, конечно, хорошо. Но если в #container вложен другой слой, то ему уже min-height = 100% не поможет…

  10. Илья:

    Спасибо огромное) все заработало

  11. Андрей:

    Спасибо, действительно с IE нет проблем!

  12. Сасай:

    Что у тебя с разметкой, наркоман?

  13. bauhau:

    Работает и не плохо!

Ответить
Обязательные поля помечены *