Nexus 9
PS4
Intuos Pro
Core i7-4790K
ページの先頭へ
トップに戻る
2013年6月20日 Web制作

【CSS】メインコンテンツの高さとサイドバーの高さを揃える方法


sidehaightこんな方法があるのね。
ブログだと特に多いんですが、メインコンテンツ(記事に当たります)の量が多いとサイドバーの高さが足りなくなってしまいます。 sidehaight1 うちのブログの場合、サイドバーの高さが足りないとかなりダサい状態になってしまうので、解決策を探してみました。

32768px

Web制作で困ったとき、やっぱりコリスさんに辿り着くわけですよ。 簡単に説明すると

  • サイドバーに「padding-bottom: 32768px; margin-bottom: -32768px;」を設定
  • メインとサイドを囲んでいるdiv要素に「overflow: hidden;」を設定

これだけです。32768というのは2の15乗ですね。
とにかく、文章だけだと分かりにくいんでサンプルを作ってみます。

サンプル

まずは普通にメインコンテンツとサイドバーを並べた場合のサンプルです。緑の部分は全体を囲うコンテナですね。
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
サイドバーの長さが足りず、裏の背景が見えちゃってますね…
それでは次に、サイドバーにmargin-bottomとpadding-bottomを指定した例を見てみましょう。
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
このように極端な数値のmargin-bottomとpadding-bottomを設定することで、サイドバー内のコンテンツ量が少なくてもメインの高さに揃えることが出来ます。
あ、containerに「overflow:hidden」を指定しないと、恐ろしい長さのサイドバーが出来上がっちゃうので気をつけてくださいね。しっかり隠すように!

JavaScriptやjQueryを使うという手もありますが、こっちのほうが手軽に実装できそうなのでメモメモ。
関連するかもしれない記事