floatしたカラムの高さを揃える | 電網覚書

本記事のソースコードの利用によって生じた損害について、当方は一切の責任を負いません。ご自身の判断と責任のもとで参照・ご利用ください。

この記事は最終更新から3年以上経過しています。

メインコンテンツとサイドバーの2段カラム構成のサイトがあって、メインコンテンツとサイドバーの高さをあわせる必要が出てきました。今までちょいちょい対応はしてきたのですが、備忘録として残してこなかったので今回対応することにします。

参照：floatしたdivの高さを揃える

備忘録

2段カラムになるようにソースを書く（HTMLファイル）

・
  ・
  ・
  <div id="contents">
  
    <div id="side">
      <!-- サイドコンテンツの内容を記述 -->
    </div>
    
    <div id="main">
      <!-- メインコンテンツの内容を記述 -->
    </div>
    
  </div>
  ・
  ・
  ・

cssはこんな感じ。ブラウザが理解できる値は-32767～32767らしいです。

#contents {overflow:hidden;}
#side {padding-bottom:32767px;margin-bottom:-32767px;width:290px;float:left;}
#main {padding-bottom:32767px;margin-bottom:-32767px;width:690px;float:left;}

とりあえず意図したとおりに表示されましたとさ、爽快爽快･･･。