How to make fixed header,footer and dynamic content body using css?

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
*{
margin:0;padding:0;
}
html,body
{
height: 100%;
}
.header,.footer,div
{
width: 100%;
}
.container
{
height: 100%;
background: pink;
margin: -64px 0 -30px;
padding: 64px 0 30px;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#content {
overflow:auto;
height:100%;
}
.block
{
width: 50%;
height: 50%;
display: inline-block;
float:left;
border: 1px solid yellow;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
.header
{
height: 64px;
background: purple;
position: relative;
z-index:1;
}
.footer
{
height: 30px;
background: gray;
position: relative;
z-index:1;
}
</style>
<head>
<body>

<div class=”header”>header</div>
<div class=”container”>
<div id=”content”>
<div class=”block”>block1</div>
<div class=”block”>block2</div>
<div class=”block”>block3</div>
<div class=”block”>block4</div>
<div class=”block”>block1</div>
<div class=”block”>block2</div>
<div class=”block”>block3</div>
<div class=”block”>block4</div>
</div>
</div>
<div class=”footer”>footer</div>

</body>
</html>

Output :-

 

 

header
block1
block2
block3
block4
block1
block2
block3
block4