How to make header & footer fixed

To make header & footer fixed, some people fix the height of content part. It may shows fine to their browser, but it might vary on another system with different resolution. So better to fix the header & footer. So if the content has less data, footer will still shown on bottom. If the content has more data, then automatically a scroll bar will be appeared.

Here is the css:-

#header
{
background: #94b4da;
height: 57px;
border-bottom: 2px solid #17047a;
position: fixed;
width: 100%;
top: 0px;
left: 0px;
text-align: left;
color: #fff;
padding: 5px 0px;
font-weight: bold;
}
.logo
{
width: 212px;
margin: 0px auto;
padding: 4px 0px;
}
#content
{
padding: 60px 0px 25px 0px;
width:100%;
left: 0px;
margin:0px;
}
#footer
{
background: #94b4da;
border-top: 2px solid #17047a;
position: fixed;
width: 100%;
bottom: 0px;
left: 0px;
text-align: center;
color: #fff;
padding: 5px 0px;
font-weight: bold;
height:20px;
}

Here is the design part :-

<div id="header"><div class="logo">Logo</div></div><div id="content">Your content here</div><div id="footer">Footer</div>