要素を高さ100%で表示したいのだが，少しはみ出てしまう

Question

みなさんこんにちは

ウェブサイトで要素（例えばdiv）をウィンドの高さいっぱいに表示したいのですが，少しはみ出てしまいます。

例えば...id="box"のdiv要素を画面の高さいっぱいに表示したいとして
以下のようなスクリプトを仕込んでみたのですが（jQueryを使っています），少しはみ出して表示されてしまいます。

<script> $(document).ready(function () { hsize = $(window).height(); $("#box").css("height", hsize + "px"); }); $(window).resize(function () { hsize = $(window).height(); $("#box"").css("height", hsize + "px"); }); </script>

MacのSafari，Chrome両方とも同じでした。
ぴったりに収めるにはどうしたらよいでしょうか？

Answer 1

その#boxという要素にはpaddingやborderが設定されていませんか？もし、設定されているなら、それらのスペースがはみ出てしまっているのでしょう。これを試してみてください。

#box{
box-sizing:border-box;
}

Comments

[D.O]

解決しました！
ありがとうございます。
初期設定ではpaddinとborderの分がheight，widthに含まれないってことなんですね。

[dshukertjr]

その通りです。初期設定ではpaddingとborderはheightやwidthに含まれていません。なので、cssの一番最初に

*{
box-sizing:border-box;
}

ですべての要素の設定を変更すると、デザインが楽に行えますよ。（*はすべての要素を選択するセレクタ）

Answer 2

ブラウザデフォルトのmarginやpadding、もしくはviewportの設定で少しずれているのだと思います。
まずbody部にmargin:0、padding:0を設定してみてはいかがでしょうか？

html, body {
  margin: 0;
  padding: 0;
}

Comments

[D.O]

レスありがとうございます。
margin，paddinの設定だけではダメでした(T-T)
案外難しいですね．．

Answer 3

CSSで下記のような指定はダメでしょうか。

#box {
  height: 100%;
}

Comments

[D.O]

レスありがとうございます

height:100%;
はなんだかうまく動きませんでした。おそらく，親要素の高さの指定に依存するんだとおもうんですが．．．。
この辺の理論って難しいですよね。