【jQuery】コンテンツの高さの自動調整

Tweet

Category JavaScript / Tagged jQuery 2012/01/25

問題

• ユーザのブラウザサイズに合わせてコンテンツを調整したい。
• ウィンドウ全体にスクロールバーを出したくない。
• ユーザーが途中でブラウザサイズを変えても、調整したい。

答え

ウィンドウサイズを変更する際にはresizeイベントが発生する。

jQueryで書くと

$(window).on('resize', function(){
    //リサイズ時の処理
});

この時に高さを色々と計算して、cssを更新します。

$(function(){
　　　function adjust(){
          var h = $(window).height(); //ウィンドウの高さ
          var h1= $('#header').height(); //他要素の高さ
          $('#contents').css('height', h-h1); //可変部分の高さを適用
     }

     adjust();

     $(window).on('resize', function(){
          adjust();
     })
});

開いたときにも１回走らせたいので最初にも実行しておきます。
このままだと固定部分の高さよりウィンドウの高さが小さくなるとマイナスになり、可変部分が表示されなくなる点は注意が必要です。ある値以下になったら最低値を適用する、ということも必要かもしれません。

DEMO

ウィンドウの高さの自動調整 – デモ

ちなみに横幅に関しても同様に調整が行えますが、CSS3が使える環境であればbox-flexというがあるのでそちらの方が便利です。