Hi all,
I'm trying to create a normal layout. From top to bottom; the header, the content then the footer (both the header and footer are fixed-height - in pixels). What's different about this layout is that the contents column will be fixed width (also centered) and has a solid background color. So far so good, no problem, now the problem is that I want the footer to be sticky (sticky, not fixed position), ie. if the contents is shorter than the height of the browser window, the footer will be pushed to the bottom of the browser window but if the contents is longer it will be displayed normally under the contents and will only be shown when scrolling to the bottom of the page.
Please see http://www.waleedeissa.com/temp/example.gif to understand more what I'm trying to do.
How can this be achieved using css, I've been trying for hours but no use. It's quite easy to achieve without the header but how can it be done with the header?
For example, this how I would do it without the header:
<html>
<head>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
#container
{
height: 100%;
margin-bottom: -100px;
}
#content
{
height: 100%;
width: 760px;
margin: 0px auto;
}
footer
{
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content"><div>
<div>
<div id="footer"><div>
</body>
</html>
Any help would be very much appreciated...
I'm trying to create a normal layout. From top to bottom; the header, the content then the footer (both the header and footer are fixed-height - in pixels). What's different about this layout is that the contents column will be fixed width (also centered) and has a solid background color. So far so good, no problem, now the problem is that I want the footer to be sticky (sticky, not fixed position), ie. if the contents is shorter than the height of the browser window, the footer will be pushed to the bottom of the browser window but if the contents is longer it will be displayed normally under the contents and will only be shown when scrolling to the bottom of the page.
Please see http://www.waleedeissa.com/temp/example.gif to understand more what I'm trying to do.
How can this be achieved using css, I've been trying for hours but no use. It's quite easy to achieve without the header but how can it be done with the header?
For example, this how I would do it without the header:
<html>
<head>
<style type="text/css">
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
#container
{
height: 100%;
margin-bottom: -100px;
}
#content
{
height: 100%;
width: 760px;
margin: 0px auto;
}
footer
{
height: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content"><div>
<div>
<div id="footer"><div>
</body>
</html>
Any help would be very much appreciated...