Header And Footer With Fixed Position While Content Is Scrollable?

I'm trying to make a website where header and footer have fixed position while content scrolls in the middle.

Copy

JSfiddle

Solution 2:

http://jsfiddle.net/yASFU/

<header>header</header><section><divclass="push">push</div></section><footer>footer</footer>

html, body {height:100%; margin:0; overflow:hidden;}
header, footer {display:block; background-color:black; height:10%;}
section {height:80%; background-color:lightblue; display:block; overflow:auto;}
section .push {height:4000px;}

Solution 3:

1. remove the position styles on the header and footer
2. set a height on the content
3. add a style overflow-y:auto to the content

If you want the content height to match the browser window (less the header and footer), use javascript to set it (and adjust on window resize events)

Share