fixed header, page scrolls into header and hidden - html

Question

I have a fixed header and footer with a height of 50px. However, when I scroll the page, the page content overlaps the fixed header and footer. How can I hide the page as it scrolls into the header and footer (the top 50px)?
This can only be done in HTML/CSS. If it takes JS or JQ to perform this, then I will forget about doing this.
CSS
header {
height: 50px;
position: fixed;
}
.page {
position: relative;
}
.sidebar {
float: left;
position: fixed;
width: 220px;
}
.main {
float: right;
width: 740px;
}
footer {
position: fixed;
height: 50px;
}
HTML
<header>
This content should stay on top.
</header>
<div class="page">
<div class="sidebar">This content should not move when using scroll bars.</div>
<div class="main"></div>
</div>
<footer>
This content should stay on bottom.
</footer>

Answer 1

Try adding a value to your footer for example
bottom: 0;
Check this fiddle: http://jsfiddle.net/d7T83/
EDIT
Or you can specify a height for your page element
.page {
position: relative;
display:block;
height: 50px;
}

Answer 2

Demo
css
body, html {
height: 100%;
margin:0;
padding:0;
}
header {
top:0;
height: 50px;
position: fixed;
left:0;
right:0;
background: #ccc;
z-index:2;
}
.page {
position: relative;
background: #eee;
z-index:1;
height: 100%;
}
.sidebar {
left:0;
position: fixed;
width: 220px;
top:50px;
bottom: 50px;
background: #ddd;
height: calc(100% - 100px);
}
.main {
float: right;
width: calc(100% - 220px);
height: 100%;
background: red;
margin:50px 0;
}
footer {
position: fixed;
height: 50px;
bottom:0;
left:0;
right:0;
background: #aaa;
z-index:2;
}

Answer 3

I think what you are looking for would be this -
header {
top: 0;
height: 50px;
position: fixed;
display:block; /* fill the width */
z-index:2; /* z-index greater than .main */
width:100%; /* fill the width */
background-color: white; /* To make it opaque */
}
.page {
position: relative;
}
.sidebar {
top: 50px;
float: left;
position: fixed;
width: 220px;
}
.main {
margin-top: 50px;
float: right;
left: 220px;
width: 740px;
z-index:1; /* z-index lesser than header and footer */
}
footer {
position: fixed;
height: 50px;
bottom: 0;
display:block; /* fill the width */
z-index:2; /* z-index greater than .main */
width:100%; /* fill the width */
background-color: white; /* To make it opaque */
}
See example here - http://jsfiddle.net/7V57P/5/

Answer 4

For the header, just give a margin top to the page content. For the footer and header Give them a z-index that is higher than the page div to ensure that it overlaps the content.
header {
height: 50px;
position:fixed;
top:0px;
left:0px;
z-index:4;
background-color:orange;
}
.page {
margin-top:40px;
}
.main {
float: right;
width: 740px;
}
footer {
position: fixed;
bottom: 0px;
height: 50px;
background-color:orange;
z-index:4;
}
DEMO FIDDLE