CSS / スタイルシートで高さを合わせる、高さ100%を実現する
テーマ：CSSスタイルシートのfloatによる段組で、メニューと本文を2段に分けるっていうシチュエーションはよくあると思います。
そのとき、メニューを本文の長さにあわせようとして、スタイルシートに height:100% を書いて、うまくいかなかったことはありませんか？
それで、その対策を調べてみました。スタイルシートだけでうまく実現できないのかなーということです。
結論から言うと、スタイルシートだけではできません。残念。
テーブルを使うか、JavaScriptを使うしかありません。
そんなわけで、JavaScriptを使用してみました。その記録です。
(1) 以下の記事からコード部分をコピーして .js ファイルとして新規作成します。HTMLヘッダ内で、作成した外部javascriptファイルを読み込むようにします。
指定した要素の高さを取得し、全部を一番高いやつに合わせるスクリプト
http://totora.jpn.org/archives/2005/07/box.html
(2) HTMLヘッダのJavaScript部分に以下のコードを書き足します。idは高さを合わせたい要素のidを列挙。
window.onload = function(){
syncBoxHeight("id_01", "id_02");
}
(3) これでIEでは動きますが、Firefoxでは動かなかったです。コードにミスがあるので修正します。
objNode.style.height = maxWidth;
↓
objNode.style.height = maxWidth+'px';
(4) JavaScriptをOFFにしているユーザーさんのために、高さの記述をします。
.foo {
min-height:100px;
height: auto !important;
height: 100px;
}
詳細は以下の記事参照
http://blog.creamu.com/mt/2008/03/cssminheighteasiest_crossbrows.html
【関連リンク】
http://norisfactory.com/stylesheetlab/000001.php
http://oshiete1.goo.ne.jp/qa3357598.html
【2008.08.26追記】
スタイルシートだけでできる方法（ハック）をこちらで発見しましたが、コメント欄を見る限り致命的な不具合があるようですので使えません。
http://coliss.com/articles/build-websites/operation/css/558.html
こちらでも同じようなライブラリを発見しました。
使ってみたところ、こちらのほうが使い勝手が良かったです。
http://blog.webcreativepark.net/2007/07/26-010338.html
