こんな感じのレイアウト

box-sizingでheight100%のブロック要素にラインを引く

tableを使わないと不可能だと思ってたけど普通にできちゃうんだねぇ
サンプル

css3のbox-sizingを使った

box-sizing-CSS3リファレンス

どっちにしろmarginは含ませる事は出来ないのでレイアウトによってはちょっとした工夫や無駄な要素が必要になるかも。

対応ブラウザ

firefox以外のモダンブラウザーには実装済みで
そのfirefoxもベンダープレフィックスをつければ使える。

ブラウザ確認したバージョンベンダープレフィックス
safari5.1.2不要
chrome20.0.1132.52m不要
firefox13.0.1必要(-moz-box-sizing: border-box;)
opera11.64不要
IE9不要
IE8不要

他の手段を使って同じように組む事も出来るのかな?


コメントを残す

メールアドレスが公開されることはありません。

You can add images to your comment by clicking here.