style01

コンテンツの要素量が少ない時にbodyの高さをブラウザの高さまで伸ばしてくれるjavascriptです。

デモページ

javascript

(function () {

    var wh = window.innerHeight;
    var body_h = document.body.clientHeight;
    
    var header =  document.getElementsByClassName('l_header');
    var footer =  document.getElementsByClassName('l_footer');
    var content =  document.getElementsByClassName('l_content');

    //もしウィンドウ縦サイズがbody縦サイズよりも大きかったら
    if(wh>body_h){
      //l_contentに効かせたい最小縦サイズ = ウィンドウ縦サイズ - l_header縦サイズ + l_footer縦サイズ
      var content_h = wh- (header[0].clientHeight+ footer[0].clientHeight);
      //アコーディオンする要素などがあった場合を考慮してheightではなくmin-heigthを効かせる
      content[0].style.minHeight = content_h+'px';
    }else{
      //小さいなら何もしない(スクロール可なら何もしない)
    }

}());

 
 
前回のエントリ「追従するものがある時に高さを調整する」と組み合わせるとこんな感じ
デモページ

javascript

(function () {

  var header =  document.getElementsByClassName('l_header');
  var content =  document.getElementsByClassName('l_content');
  var footer =  document.getElementsByClassName('l_footer');

  var fixed = document.getElementsByClassName('fixed_bottom');
  if(fixed.length > 0){
    var fixed_h = fixed[0].clientHeight;
  }

  var wh = window.innerHeight;
  var body_h = document.body.clientHeight;

  //bodyの高さが足りないときに高さを調整する
  var body_fix = function(){
      var content_h = wh- (header[0].clientHeight+ footer[0].clientHeight);
      if(wh>body_h){
        content[0].style.minHeight = content_h+'px';
      }
  };

  //fixed-bottomが存在する時に高さを調整する
  var bottom_fix = function(call){
      if(fixed.length > 0){
          footer[0].style.paddingBottom = fixed_h+'px';
      }
      call();
  };

//bottom_fix()の処理をした後にbody_fix()を呼ぶ
bottom_fix(body_fix);


}());

コールバックでbottom_fixを呼んだ後にbody_fixを呼んでいます。
こちらではリサイズした時のためにl_contentの高さに関係なくfooterにpaddingをつけています。