Height 100 % или высота на полную

Создавая тему для блога возникла проблема при маленьком объеме странице основная часть сжималась до минимума и footer прижимался к ней, что не есть хорошо и не красиво. Решил сделать основную часть с коннектом на всю высоту страницы. Есть конечно много способов как это сделать с использованием JavaScript'a и без него, а так же с помощью CSS. Я выбрал чистый CSS.


Плюс этого приема — это чистый CSS, не у всех JavaScript включен. Однако он хорош, тогда когда в концепции вашего дизайна применяются прямые границы контейнеров.


Вот этот CSS, «возмутитель общественного порядка» :).

<style type="text/css">
  html,body{
    height:100%;
    margin:0px;
    padding:0px
  }

  .height100 {
    height: auto;
    min-height: 100%;
  }
</style>

* This source code was highlighted with Source Code Highlighter.

Добавляем для IE6 (спасибо private_face).

<!--[if IE 6]>
<style type="text/css">
  .height100 {
    height: 100%;
  }
</style>
<![endif]-->

* This source code was highlighted with Source Code Highlighter.

Применяем.

<div class="height100">
  DIV c height 100%
</div>

* This source code was highlighted with Source Code Highlighter.

Пример.


P.S. Критику приму с удовольствием.