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

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

Really simple CSS trick for equal height columns

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

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

HTML

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

CSS

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

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