Cacher is the code snippet organizer for pro developers

html, body {  height: 100%;}
#box1 {  height: 100%;}

//.ex
html, body {  height: 100%;}
.container {  height: 100%;}
.sideA {  height: 100%;}
.contents {  height: 100%;}

基本的には親要素に高さが指定されていれば、高さを相対値で設定できる。
※「親の親」に指定があっても駄目

親要素の高さが指定されていない場合、heightをパーセントで指定しても無視される。
また「親の親」に高さが指定されていても、「親」に高さが指定されていない場合同じ結果。


画面全体の高さに合わせるには
html要素とbody要素にheight:100%を指定。

html,body,.background-100{
	height: 100%;
	}
	
.background-100 {
	min-height: 100%; /* 最小の高さ */
}
	
body > .background-100 {
	height: auto; /* 要素を超えた分の背景が伸びないブラウザ用 */
}

画面全体の高さに合わせたときに
スクロールすると背景が切れる

なので下のが一番いいかも