How to make the content div scrollable without using javascript

How to make the content div scrollable without using javascript

I have a simple page. Here i want a fixed header and a fixed footer. The
body of the content to be scrollable.
HTML
<div class="container">
<div class="header">This is Header</div>
<div class="body">This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body
<br/>This is Body</div>
<div class="footer">This is Footer</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
.container {
width: 100%;
height: 100%;
background: #DDD;
}
.header {
width: 100%;
height: 40px;
background: red;
position: absolute;
top: 0;
}
.footer {
width: 100%;
height: 40px;
background: green;
position: absolute;
bottom: 0;
}
.body {
width: 100%;
background: blue;
overflow: auto;
}
However when i scroll the whole page tends to scroll making my header and
footer move. I can resolve this using javascript, getting the height of
the screen and subtracting the header and footer height.
But is there any way we can achieve this only using css. If yes then how ?