height:100%を指定する

ブラウザ画面全体にdivをぴったり敷きたい時に横幅の指定を width: 100%; とすると有効になりますが、
高さの指定を height: 100%; としても有効にならない場合があります。

理由は高さの指定は親要素の高さに依存するからです。
解決策として

html,body{
height: 100%;
}
 
と指定するとheight: 100%; が有効になり、画面ぴったりに敷けます。
後日紹介する中央にdivを配置する方法と一緒に使用すれば画面中央にロゴを表示したりする事ができます。

コメント

コメントを投稿

このブログの人気の投稿

Firefox3とFirefox2を共存＆同時起動させる方法

ブラウザチェックの為にFirefox3と2を共存＆同時に起動したい。 そんな時は難しいことを考えずに、FirefoxのPortable Editionを使いましょう。 Firefox3はインストール済みということで話を進めていきます。 ・SourceForge Firefox2.0.0.18 Firefox_Portable_2.0.0.18_ja.paf.exeが日本語版です。 これを好きなところにインストールした後に /Firefox Portable/App/Firefox/firefox.exeへのショートカットを作ります。 例： C:\Program Files\Mozilla Firefox2.0.0.18 Portable\ ショートカットを実行すると、どのプロファイルを使うかと聞かれるので新しく作ります。 僕は「Firefox2.0.0.18」というプロファイル名で作りました。作ったあとは起動せずに終了。 次にショートカットを右クリック→プロパティを押して、｢リンク先｣の最後に 「 -no-remote -P 作ったプロファイル名」を加えます。一文字目の半角スペースを忘れずに。 例： "C:\Program Files\Mozilla Firefox2.0.0.18 Portable\App\Firefox\firefox.exe" -no-remote -P Firefox2.0.0.18 これでFirefox3とFirefox2が同時に起動できます。 ちなみに Firefox3のPortable Edition もあります。 3と3の同時起動もできると思うので、 ネットサーフ用のFirefoxとWeb検証用のFirefoxを別々にできそうですね！
続きを読む

IE7でサイズの大きな文字が切れる

IE7で表示した時にフォントサイズの大きな文字の下の方が切れることがあります。 恐らくdivタグの中にdivタグを入れるとこの現象がおこると思われます(未確認) 僕は以下の状況で文字が切れました。 #cBox {       height: 50px;       width: 200px; { #cName {       font-size: 32px;       margin-top: 20px; } 解決方法としてはline-heightで文字の高さを指定すると解決します。 例： #cBox {       height: 50px;       width: 200px; { #cName {       font-size: 32px;       margin-top: 20px;       line-height: 40px; } あとはレイアウトを見ながらline-heightを微調整してください。
続きを読む

IE6で指定した背景が消えるバグ

IE6で指定した背景画像が表示されないバグがあります。 スクロールバーを動かすと表示されたり消えたりする厄介なバグです。 原因はfloatプロパティを指定した要素の子要素に背景を指定すると起こる場合があります。 対処法はwidthを指定すれば回避できます。
続きを読む