タグ

ブックマーク / loconet.web2.jp (1)

  • CSSの「height:100%」について - webデザイナーのナナメガキ

    CSSのみでブラウザの表示枠ぴったりにレイアウトしたい時、どうしたらよいか。 テーブルレイアウトの場合は大枠を<table width=”100%” height=”100%”>にすればOKだった。CSSの場合ちょっと癖があり、横幅は100%でぴったりいくのだが、中身のボックス要素を「height:100%」で指定しても、その要素そのものの高さにしかならない。サンプル(横幅のみ表示枠ぴったり) なぜかというと、この高さの指定は親要素の高さに依存するものだからだ。(参考:height: n%;の正しい仕様 – Web標準普及プロジェクト) なので親要素である”<html></html>”と”<body></body>”の高さを100%に指定すると、ブラウザの表示枠ぴったりにはめることができる。サンプル(縦横表示枠ぴったり) html,body{ height: 100%; } これを応用して

    griefworker
    griefworker 2010/07/05
    CSSレイアウトで高さをブラウザ表示枠ぴったりにしたいなら、htmlタグやbodyタグのheightを100%にすればいい。
  • 1