【CSS】「height: 100%;」が効かない時に確認すべきこと

heightが100%になってくれない

cssでよく使うのがheightやwidthを画面の100%にする方法です。

これが効かなくなった時に、確認すべきことをご紹介します。

親要素となるhtmlやbodyの高さはどうなっているか？

これを確認しましょう。

もし、リセットcss以外に設定がなかったら、以下のように書きましょう。

Scssだと、

html{
  height: 100%;
  body{
    height: 100%;
  }
}

私はこれを試したら解決しました。