Tutorial :How can I get a fixed footer like facebook application design



Question:

How can I build a fixed footer like facebook application design? Examples with css appreciated.

Duplicate of Facebook like status div


Solution:1

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


Solution:2

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.


Solution:3

I have found CSS Play a really helpful site.

http://www.cssplay.co.uk/

More specifically, http://www.cssplay.co.uk/layouts/, for layouts.


Solution:4

More examples at CSS Sticky Footer.

Edit: Another example with slightly cleaner CSS


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »