[CSS]コンテンツとサイドバーの高さを同じにするスタイルシート

サイドバーがコンテンツの高さと異なる際に、コンテンツと同じ高さのように見せるスタイルシートをwoork upから紹介します。

Really simple CSS trick for equal height columns

仕組みの概要は、コンテンツの右のボーダーを200pxにし、その上にサイドバーを表示して、サイドバーの高さをコンテンツと同じように見せるものです。

HTMLは、コンテンツとサイドバーのdiv要素を内包するdiv要素（wrapper）を配置します。

HTML

<div id="wrapper">
<div id="maincontent">...</div>
<div id="sidebar">...</div>
</div>

CSSは、コンテンツとサイドバーにposition:absolute;を指定します。
コンテンツはborder-rightを200pxにし、サイドバーと同じカラーをしています。
サイドバーはコンテンツのボーダーと同じカラーの背景色にし、同じサイズにします。

CSS

#wrapper{
    margin:0 auto;
    width:600px;
}
#maincontent{
  border-right:solid 200px #DFDFDF;
  position:absolute;
  width:400px;
}
#sidebar{
    background:#DFDFDF;
    margin-left:400px;
    position:absolute;
    width:200px;
}

実装のイメージは、下記のようになります。

使用するには条件が限定されますが、手軽に実装できるのが強みです。
昔、borderを使ってIE用にmin-widthをしてたのを思い出しました。

Post on:2009年10月13日