改造人ツクルダー & ザ・テクトロイド・ボックスTUKURUDER & The Techtroid Box

CSSの「float: left」でボックスを横に並べ、2カラム3カラムの構成にすることが増えてきた。

しかし、それぞれのカラムは内容の情報量に応じて高さが可変するため、カラムの高さが揃わないという大問題が起きてしまう。

↓このように

「#container」：親ボックスのid

「#right_column」：右カラムのid

「#left_column」：左カラムのid

[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #aaaaee;
  float: left;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #99ff99;
  float: left;
}

[/codesyntax]

そこで、

親ボックスと背景を同色にするとか、

[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #eeaaee;
  float: left;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #eeaaee;
  float: left;
}

[/codesyntax]

高くなりそうなカラムにボーダーを付けるとか（この場合は左カラム）、

[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #eeaaee;
  float: left;
  border-right: 1px solid #333;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #eeaaee;
  float: left;
}

[/codesyntax]

各カラムに「min-height」を設定するとか、

[codesyntax lang=”css” title=”CSS”]

#container {
 width: 300px;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #aaaaee;
  float: left;
  min-height: 150px;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #99ff99;
  float: left;
  min-height: 150px;
}

[/codesyntax]

各カラムは色指定せず、カラムの境界付近で塗り分けた画像を親ボックスの背景にするとか、

[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
  background-image: url(background.png);
}
#left_colmun {
  text-align: center;
  width: 200px;
  float: left;
}
#right_colmun {
  text-align: center;
  width: 100px;
  float: left;
}

[/codesyntax]

将来的には「display: table」「display: table-cell」を使うと良いとか（IE7以前非対応）、

[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
  display: table;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #aaaaee;
  display: table-cell;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #99ff99;
  display: table-cell;
}

[/codesyntax]

親ボックスに「overflow: hidden」

各カラムに「padding-bottom: 32768px」「margin-bottom: -32768px」

で強引にとか、

[codesyntax lang=”css” title=”CSS”]

#container {
  width: 300px;
  overflow: hidden;
}
#left_colmun {
  text-align: center;
  width: 200px;
  background: #aaaaee;
  float: left;
  padding-bottom: 32768px;
  margin-bottom: -32768px;
}
#right_colmun {
  text-align: center;
  width: 100px;
  background: #99ff99;
  float: left;
  padding-bottom: 32768px;
  margin-bottom: -32768px;
}

[/codesyntax]

あきらめて「table」 タグを使うか、

左カラム AAAAAAAA AAAAAAAA AAAAAAAA

右カラム

様々な方法を試してきたが、

最近ハマっているjQueryで実に簡単にできてしまった。

[codesyntax lang=”javascript” title=”jQuery”]

$(window).load(function(){
  var height = $('#container').outerHeight();
  height = height + 'px';
  $('#right_column').css('height',height);
  $('#left_column').css('height',height);
});

[/codesyntax]

カラム内に「padding」が指定されていると、高さがうまく取得できないことがあるようだ。その場合は、「height = height + ‘ 足りないピクセル数 ‘ + ‘px’;」で良いかも。