このブログのはてなブックマーク数 このエントリーをはてなブックマークに追加

知らなきゃ絶対損するPCマル秘ワザ

知らなきゃ損するPC情報を分かりやすくメモする個人ブログ。
『月,水,金』の週3回更新!(予定)

このブログ内をキーワードで検索することもできます。
Loading



最新記事
  • Firefox:「コンテナータブ」の新しいタブにスピードダイヤルが出ない (06/19)
  • ツイッター:「○○さんがいいねしました」を非表示にする (06/16)
  • Firefox:複数アカウントを使い分けできる「コンテナータブ」 (06/14)
  • マクロキー17個×2、コスパが良いキーボードを買ってみた (06/12)
  • iPhone:日本らしさ全開! 「今日は何の日」まで分かるカレンダー (06/09)
  • 管理人より
    2200万アクセス突破しました。ありがとうございます。

    CSS: body の height を100%にしても上下に広がらない

    このエントリーをはてなブックマークに追加
    操作画面


    こんにちは、さち です。

    先日、サイト(ディスプレイ ドット抜けテスト)を作っているときに
    ページを画面いっぱいに広げようとしていました。

    そこで、body の height を100%にしました。
    しかし、思った通りの動作をせず上手くいきません。

    なんで?




    bodyのheightを100%にしても広がらない

    <body>
    <div> div </div>
    </body>

    CSS で、bodydivheight を100%を設定して
    div を上下いっぱいに広げます。
    body {
    height: 100%;
    margin: 0;
    background-color: #FF6;
    }

    div {
    height: 100%;
    margin: 0;
    background-color: #E96;
    color: #FFF;
    }

    しかし、ページを表示した結果は下のとおり。
    この CSS では div が上下いっぱいに広がってくれません。
    操作画面




    解決方法

    原因は body にあります。
    body の背景色が全体に付いているので上下いっぱいに広がっていると思いきや
    たった 57.6px しかありません。くそぉー!だまされたぁーーー!!!!!!
    操作画面

    通常、height は親要素の高さを100%としています。
    つまり、body の height を100%にしても上下に広がらない原因は
    親要素の高さが狭いからです。

    body の親要素は html ですね。
    ということで、CSS に html を追加して height を100%にすれば解決です。
    html {
    height: 100%;
    margin: 0;
    }

    body {
    height: 100%;
    margin: 0;
    background-color: #FF6;
    }

    div {
    height: 100%;
    margin: 0;
    background-color: #E96;
    color: #FFF;
    }

    body が上下いっぱいに広がったので、div も上下いっぱいに広がりました。
    操作画面

    ページを画面全体に広げるための CSS は
    まとめて記述する方が手っ取り早いし見やすいかもしれませんね。
    html, body, div {
    height: 100%;
    margin: 0;
    }

    body {
    background-color: #FF6;
    }

    div {
    background-color: #E96;
    color: #FFF;
    }




    そもそも、html タグにも CSS の設定が可能だったんですね。
    今回の問題に遭遇するまで考えたこともなかったので勉強になりました。









    このエントリーをはてなブックマークに追加




    管理人だけが読めるコメントにする(返信はしません)
    【お知らせ】
    • コメントは承認制です。反映に時間がかかります。
    • Yahoo!BBはスパムコメントが多いため一部規制中です。
    • URLを含む投稿はできません。必要な場合は最初のhを削って下さい。
    • 記事に直接関係ない個人のトラブルにはお答えできません。
    • Android は使ったことがないので質問を頂いても答えられません。
    • その他詳細はこちら





    記事別の週間アクセス数ランキングです。こちらの記事もぜひ読んでみて下さい。

    2008-2017 知らなきゃ絶対損するPCマル秘ワザ  無断転載禁止

    ブログパーツ