html,body{height:100%}でブラウザー表示領域一杯まで広げたブロック要素に、余白やborderを含ませつつ100%におさめる方法

  • このエントリーをはてなブックマークに追加
  • LINEで送る

こんな感じのレイアウト

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

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

css3のbox-sizingを使った

box-sizing-CSS3リファレンス

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

対応ブラウザ

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

ブラウザ 確認したバージョン ベンダープレフィックス
safari 5.1.2 不要
chrome 20.0.1132.52m 不要
firefox 13.0.1 必要(-moz-box-sizing: border-box;)
opera 11.64 不要
IE 9 不要
IE 8 不要

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

  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。

コメントを残す


You can add images to your comment by clicking here.