山形を拠点に活動するWEBデザイナーのサイト兼備忘録です

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

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

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

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

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

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

キーワードタグ:

投稿日時:

最終更新:


コメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

※コメントは承認制となっています。管理人の承認を得て初めて掲載されます。
※コメントには以下の HTML タグと属性のみ使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください