Растягиваем сайт по высоте

Пролог

Понадобилось мне как-то сделать сайт у которого был вполне приличный дизайн, но текстов категорически нехватало... Некоторые странички содержали пару предложений и все.

Сайт имел резиновую верстку и прекрасно растягивался на всю ширину броузера, но так как текста было немного, то получалось что он весь съезжался к верху а между низом сайта и окном броузера получалось большое, незаполненное пространство.

В то время, единственный способ как побороть эту беду, было перевести броузер в сырой режим. В режим не соблюдения стандартов. Это было плохое решение, которое работало не очень то хорошо.

Спустя год

И вот, спустя некоторое время я столкнулся с той же задачей. Использовать сырой режим я не мог, так как заказчик строго следил за валидностью страничек. Да и верстка была уже не табличной.

Тут то и пришла спасительная мысль: "а почему бы не использовать JavaScript?"

А в самом деле? Зачем зацикливаться на CSS если он такой вредный?

Пробежавшись по справочникам удалось установить, что есть функции которые позволяют узнать высоту окна броузера.

Для IE 6+

document.documentElement.clientHeight

Для FireFox 2+

window.innerHeight

А так как дизайн сайта, обычно, состоит из фиксированных по высоте шапки и подвала и динамически меняющейся части содержащей контент можно написать функцию, которая будет растягивать дизайн на весь экран.

function he(){
  var input = 'body'; // id блока у которого проверяем высоту
  var output = 'hof'; // id блока для которого выставляем высоту
  var height = 50;    // это высота статичных элементов шаблона
  var id = function(x){
    return document.getElementById(x)
  }
  if(window.innerHeight){
    x = window.innerHeight - height;
  }else{
    x  = document.documentElement.clientHeight - height;
  }
  if(id(input).offsetHeight>x){
    x = id(input).offsetHeight;
  }
  if(id(output).style.height!=x){
    id(output).style.height = x+'px';
    win_h = x;
  }
}
he(); setInterval(he,1000);

Благодаря такой небольшой фишке, ваш сайт станет еще красивей.