1. 一番下まで背景色をつけたい
2. body要素にpaddingを設定したい
3. body内に要素が増えてきてスクロールバーが発生←問題個所

３のようにbody内の要素が増えてきてスクロールバーが発生すると一番下まで延びてくれない。
これはhtml, bodyに設定したheight:100%が原因
ただこの時、bodyにbackground-color:blue;を設定したらちゃんと一番下まで色がついている不思議

仕方がないのでJavaScriptでゴリゴリしてみた。
確認される場合はコチラからどうぞ

ゴリゴリしたコード

function bodyHeight(){
  // body要素のheightを初期化
  document.body.style.height = 'initial';
  // heightを指定する
  document.body.style.height = document.body.clientHeight + 'px';
};
// 読み込み時
window.addEventListener('load', bodyHeight);
// リサイズ時
window.addEventListener('resize', bodyHeight);