HTML CSSヘッダーを固定する際に文字量がおおくなった場合、背景が自動的にのびるようにしたい

<header>
</header>
<div class="contents">
<div class="box1">
<h2>サンプル1</h2>
<p>
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
</p>
</div>
<div class="box2">
<h2>サンプル2</h2>
<p>
これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。これはサンプルテキストです。
</p>
</div>
</div>
<footer>
</footer>

body, html {
height: 100%;
background-color: white;
}

h1, h2, h3, h4, h5, h6, p, body {
font-size: 18px;
color: #4a4a4a;
font-family: sans-serif;
margin: 0;
padding: 0;
}

header {
height: 80px;
width: 100%;
background-color: #ccc;
position: fixed;
}
.contents {
height: 700px;
width: 960px;
background: #cce;
margin: 0 auto;
padding: 60px 0 0 0; 
}

footer {
margin: 0 auto;
height: 80px;
width: 100%;
background-color: #ccc;
position:absolute;

}
.box1 {
min-height: 300px;
height: auto; 
width: 100%;
background-color: green;
}
.box1 p {
font-size: 18px;
color: #fff;
line-height: 26px;
padding-left: 150px;
padding-right: 150px;
}
.box1 h2 {
font-size: 34px;
color: #4a4a4a;
padding-top: 15px;
padding-bottom: 30px;
text-align: center;
}
.box2 {
height: 300px; 
width: 100%;
background-color: blue;
}
.box2 p {
font-size: 18px;
color: #fff;
line-height: 26px;
padding-left: 150px;
padding-right: 150px;
}
.box2 h2 {
font-size: 34px;
color: #4a4a4a;
padding-top: 15px;
padding-bottom: 30px;
text-align: center;
}