レスポンシブサイトのPCサイズでメインの尺が足りない！メインコンテンツの高さ不足をjQueryで補ってみた。

ブログ初期において、コンテンツがない時にはサイドバーのあるページではサイドバー充実！メインコンテンツ貧弱！という事態に陥ることがままあります。（今まさにここで起きている事ですね・・・）
だいたいサイドバーがあるのはPC表示の時だと思いますので、それを想定したコードを描いてみました。

メインコンテンツは<div class="contents">タグ、サブコンテンツは<div class="sub">に納めているものとします。
また、1024pxを境に変わるように設定しています。
ご自身のサイトに合わせる場合はvarの中身と条件式中のbody.outerWidth() >= 1024 の 数字を変えてください。

var body = $('body'),
    cont = $('div.contents'),
    sub = $('div.sub'),
    contHeight = cont.outerHeight,
    subHeight = sub.outerHeight,
    action = function(){
        if (subHeight > contHeight && body.outerWidth() >= 1024) {
            $(cont).css({'height': subHeight});
        } else {
            $(cont).css({'height': 'auto'});
        };
    }

$(document).ready(function(){
    $(window).off('load resize scroll');
    $(window).on('load resize scroll',action);
});

たったのこれだけです。

最初の5行は各パーツの変数の設定ですcontHeightとsubHeightで高さを取得。次の変数actionで、ウインドウをロードした時、またはリサイズ、スクロールした時に以下の条件を満たしていたら、といった感じで条件式を書いています。条件式はごく単純なもので、画面の横幅が設定した値以上、サブコンテンツのサイドバーがメインコンテンツの高さを上回った時はサイドバーの高さに合わせる、そうでなければ自動で合わせる。というもの。

スマホやタブレットのサイズでサイドバーなしなら尺余りにする必要はないのですが、PCでちょろっとコンテンツがあって、あとはbodyの背景色が続くというのはなんとなく落ち着かないものです。

ならコンテンツを充実させろよ！と思った皆様。その通りでございます・・・。

ただ、Twitterの文字数以上でブログを書いたとしても尺が余るのはよくあることですので、それを補うのにはもってこいですよ？
はい、もっとちゃんと長めに記事を書けるように精進いたします・・・

以上、自戒を込めた記事でした。

追記（※10/18）
たまにonイベントが重複するみたいで、うまく読み込まないことがあるので、offイベントを追記、functionの中身をまとめました。あと、offとonは$(document).ready　で発火させた方がうまくいってるくさいです。