CSSでbody要素画面いっぱい設定する

要素内で画面いっぱいにコンテンツ要素がなかった場合デフォルトだとbody要素の下に空白ができる。これを画面いっぱいに設定する方法をこちらで紹介します。

コードはとてもシンプルでhtml, body要素にに下記のプロパティを使うことで画面いっぱいに設定できます。

*{
    margin:0;
    padding:0;
}
html{
    height:100%;
}
body{
    min-height:100%;
}

heightだけであれば上記のコードで高さが画面いっぱいに設定できると思います。あとはhtml,body要素のpaddingとmarginの相殺をすることで変な余白が消えるのですっきりします。