I had been looking around for a way to accomplish fixed header and footer on a website when scrolling, and somehow i haven’t got it right with background attachment: fixed, neither i got it with absolute position…
I have a main Div called wrapper, inside there are three main Divs: header, content and footer, and each one of them has sub Divs inside for the content of each one. So the structure goes something like this in general terms:
body[
[ Div:wrapper
Div:Header
Div:top-banner
Div:Menu
Div:Buttons
]
[Div:Content]
[Div:Footer
Div:bottom-banner
]
]
is there any way to accomplish that the header and footer remain “locked” at the top and bottom of the browser window and only the content scrolls down.
See Here is the proper solution:
html, body {
height: 100%;
}
body {
any other styles;
}
#container {
min-height: 100%;
other styles;
}
* html #container {height: 100%;}/*IE6*/
this way, your page start out 100% but can grow bigger as content demands.
