Home > CSS > CSSの「height:100%」について

CSSの「height:100%」について

  • 2006-04-09 (日) 23:11
  • CSS

CSSのみでブラウザの表示枠ぴったりにレイアウトしたい時、どうしたらよいか。

テーブルレイアウトの場合は大枠を<table width=”100%” height=”100%”>にすればOKだった。CSSの場合ちょっと癖があり、横幅は100%でぴったりいくのだが、中身のボックス要素を「height:100%」で指定しても、その要素そのものの高さにしかならない。サンプル(横幅のみ表示枠ぴったり)

なぜかというと、この高さの指定は親要素の高さに依存するものだからだ。(参考:height: n%;の正しい仕様 – Web標準普及プロジェクト

なので親要素である”<html></html>”と”<body></body>”の高さを100%に指定すると、ブラウザの表示枠ぴったりにはめることができる。サンプル(縦横表示枠ぴったり)

html,body{
height: 100%;
}

これを応用して、よくある「ヘッダー+サイドメニュー+コンテンツ+フッター」の2カラムレイアウトを、表示枠ぴったりで作ることができる。サンプル(表示枠ぴったりレイアウト)

注意点としては、以下の通りです。

  • フッターは「posiotion:absolute; bottom:0px;/*数値はお好みで*/」で親要素のbottomからの距離で配置。
  • レイアウト要素の大きさは”%”指定で(pxなどで固定すると中身のmenuやcontentがはみ出る。なぜ?)
  • ページの中身が表示枠に収まらない場合には適さない(「overflow:auto;」の指定で収まりきらない場合はスクロールバーが出るのだがいまいち

まだまだ改善の余地ありですが、固定のレイアウトにしたい場合などはいいんじゃないでしょうか。

*{
margin:0px;
padding:0px;
}

html,body{
height: 100%;
}

#container{
width:100%;
height:100%;
}

#header{
width:100%;
height:10%;
background:#009900;
}

#menu{
width:20%;
height:87%;
float:left;
background:#ccc;
overflow:auto;

}

#main{
float:left;
width:80%;
overflow:auto;
}

#footer{
clear:both;
position:absolute;
bottom:0px;
height:3%;
width:100%;
background:#009900;
}

add to hatena hatena.comment (70) add to del.icio.us (10) add to livedoor.clip (4) add to Yahoo!Bookmark (4) Total: 88

Comments:0

Comment Form
Remember personal info

Trackbacks:0

Trackback URL for this entry
http://loconet.web2.jp/blog/archives/2006/04/cssheight100.html/trackback
Listed below are links to weblogs that reference
CSSの「height:100%」について from webデザイナーのナナメガキ

Home > CSS > CSSの「height:100%」について

Search
Feeds
Meta

Return to page top