ConneCre

connelog

RSS

CSSのheight:100%;について

height: 100% ; の全画面表示の指定でFirefoxで見事にはまったので、メモ

CSSでブラウザの高さを100%にするには、中身のボックス要素に「height: 100% ;」の記述を行うだけでは実現しません。

この高さ指定は親要素に依存するものなので、まずhtml,bodyにも「height: 100% ;」の記述を行う必要があります。

※親要素にheight指定がないと、height: auto ;が継承されるためです。

*{
  margin:0;
  padding:0;
} 

html,body{
 height: 100% ;
}

#wrapper{
 height: 100% ;
}

しかし、これだけですとFirefoxでスクロールが発生したとき、スクロール分切れます。
Firefoxでの高さ100%表示にはさらに

*{
  margin:0;
  padding:0;
} 

html,body{
 height: 100% ;
}

#wrapper {
 height: 100% ;
 min-height: 100%;
}

body > #wrapper {
 height: auto;
}

上記のようにコードを記述する必要があります。

PAGE TOP