SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

問題

答え

ウィンドウサイズを変更する際には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();
     })
});

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

DEMO

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

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

関連するメモ

コメント