bodyの高さが足りない時に高さを調整する

コンテンツの要素量が少ない時に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をつけています。