カテゴリー:
CSS
タグ:
 css JavaScript

このエントリーをはてなブックマークに追加
更新日時:
2013年04月22日(月)
作成日時:
2013年04月22日(月)

前の記事 / 次の記事

参考: height:100%で画面全体に表示させる方法

例えば

-# haml
%html
  %head
    %title ウィンドウ(body)に高さを合わせる
%body
  %h1 親要素の高さに合わせる
  %div#content
    親要素の高さに合わせるには親要素に具体的な高さが設定されている必要がある。

みたいなhtmlがあって、 #content の高さをウィンドウの高さと同じにしたい時。
body要素の高さがウィンドウの高さに見えるので、

:sass
  div#content
    height: 100%

と書けば、#content の高さもウィンドウの高さと同じになりそうだけど、 ならない

なんでか?

デフォルトではbody要素の高さは100%ではなく、autoだから。

autoの100%は、親要素の高さと同じ、
ということになってくれても良さそうなものだけど、ならない。

どうすればいいのか?

body要素に高さを設定する

なので、

:sass
  body
    height: 100%
  div#content
    height: 100%

と書けば、#content の高さもウィンドウの高さと同じになりそうだけど、 ならない

なんでか?

bodyの親要素にhtmlがいて、htmlの高さが、100%ではなく、autoだから。

普段html要素なんていじらないからhtml要素とか、あーそういえばあったねって感じだけど、
html要素にも高さを設定しないと結局autoのままなので設定する。

なので、

html要素にも高さを設定する

:sass
  html, body
    height: 100%
  div#content
    height: 100%

で、解決。

JavaScriptで高さ取得してセットするかとか思ってたけど、ダサいことにならなくてよかった。