Pull to refresh

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

Reading time1 min
Views6.9K
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. Критику приму с удовольствием.
Tags:
Hubs:
Total votes 21: ↑8 and ↓13-5
Comments19

Articles