CSSを使ってHTMLのHEIGHT指定を100%にする。

今日もメモ。
いろいろメモをまとめておこうと思っています。

今回は、HTMLのHEIGHT指定です。

通常HEIGT指定でheight=100%とすると、画面表示範囲で縦幅100%となりますが、<HTML>と<BODY>にも100%指定をしないとうまくいきません。
ただし、これでもIEやFirefoxでもうまく表示できないです。画面範囲外までスクロールする場合や、画面の縦幅100%未満の場合にうまくいきません。

うまくいかない場合の画面のイメージ
画面内に収まっているとき。
HEIGHTの範囲

画面外までスクロールして表示する場合。
HEIGHTの範囲


そこで、CSSで宣言するとクロスブラウザでもうまくいきます。
(IE7とFirefox3.xで確認済み)


サンプルのCSSソース
html,body {
   margin:0px;
   height:100%;
}
body {
   min-height:100%;
   height:auto !important;
}
中身は、html,body{}のheight=100%にし、その後、BODY要素において「!important」と宣言することでCSSの優先度を上げ、ブラウザに左右されないHEIGHTを指定します。

このように、縦幅が意図する100%指定ができます。
HEIGHTの範囲


■ おまけ。
最下層に「©2008ういすぷ」のように表示したい場合。
position:relative;とposition:absolute;を使うとうまくいきます。
「©2008ういすぷ」の部分は<ADDRESS>タグを使うものとします。


BODYに基準値となる「position:relative;」を指定します。
またBODYにpadding-bottom:1em;を指定した理由は、表示画面外まで長文になった際、そのままだと文字が重なってしまうからです。
そこで1行分ずらしています。(場合によってpxなどで指定してください。)


サンプルのCSSソース
html,body {
   margin:0px;
   height:100%;
}
body {
   min-height:100%;
   height:auto !important;
   position:relative;
   padding-bottom:1em;
}
address {
   position:absolute;
   bottom:0px;
}

<ADDRESS>の部分を真下にぴったりくっつけない場合には、
address {
   position:absolute;
   bottom:0px;
   padding-bottom:1em;
}
のように、「padding-bottom:1em;」を使うとうまくいきます。


今日のメモはここまでです。
2008.12.10

コメント投稿フォーム

 

最近の投稿

カテゴリ

オススメ

カプセルトイ関連

ミク関連

アーカイブ

RSS Feed RSS Feed Atom Feed TopicXML アイコン
WebBoard