How can I build a fixed footer like facebook application design? Examples with css appreciated.
Duplicate of http://stackoverflow.com/questions/506835/facebook-like-status-div
+6
A:
One way is given here:
In HTML:
<div id="container">
<div id="content"></div>
<div id="footer"></div>
</div>
In CSS:
#container {
position:absolute;
min-height:100%;
}
#content {
margin-bottom:100px; /* same as footer height */
}
#footer {
position:absolute;
bottom:0;
height:100px; /* same as content margin-bottom */
}
Edit: That link was based on this which has some exceptions
Mark Pim
2009-03-23 13:39:43
thank you so much help
2009-03-23 13:41:06
I do not think this will work in IE.
mike nvck
2009-03-23 14:38:35
+1
A:
I have found CSS Play a really helpful site.
More specifically, http://www.cssplay.co.uk/layouts/, for layouts.
Shaun Humphries
2009-03-23 13:45:00
+2
A:
Facebook's footer stays in place as you scroll. To accomplish this, you'll need HTML like this:
<body>
<div id="content">
[content]
</div>
<div id="footer">
[footer]
</div>
</body>
and CSS like this:
#footer{
position:fixed;
bottom:0;
width:100%;
background:#f00;
}
The CSS position: fixed instructs the browser to keep this element's position fixed, regardless of scrolling.
Ron DeVera
2009-03-23 14:06:57
A:
More examples at CSS Sticky Footer.
Edit: Another example with slightly cleaner CSS
Mark Hurd
2009-03-25 16:22:07