How to fix the footer to bottom of the page?

Hi

i want to fix the footer at bottom of the page , if contents are short or long , it should show at bottom of the screen, the contents should scroll inline of the browser. any one suggest solution to solve this problem

What you want is a “sticky footer”, which is not easy to do. Here is a bulletproof way to achieve it:

See if that makes any sense, and post back if you have questions. :slight_smile:

i want make a footer fixed at the bottom of the screen(like mobile application have fixed footer at the bottom all contents scroll behind the footer ). how do to achieve that , i test your code it fixed at bottom of the page ,if contents are long i have to scroll down to see the footer. i want make it fixed . can u suggest solution to it

You could try something like

#footer {position:absolute; bottom: 0;}

I can’t guarantee it would work in all browsers, though—especially mobiles.

the below code make footer as fixed in bottom of the screen


#footer {position:fixed; bottom: 0;}


#footer {position:fixed; bottom: 0;}

That’s going to cause more problems than it will solve…

can you tell detail what problem arise

how to set position fixed in mobile safari?

You can’t as position:fixed is not supported although there are some javascript fixes (although I believe [URL=“http://davidbcalhoun.com/2011/new-mobile-safari-stuff-in-ios5-position-fixed-overflow-scroll-new-input-type-support-web-workers-ecmascript-5”]ios5 is implementing it natively as we speak).

The problem with position:fixed is that you must make sure that the content stays within the viewport because fixed elements do not scroll and cannot be reached once they extend beyond the viewport boundaries.

i have tested the sample page in the device,but it not fixed

It works fine for me on the Iphone simulator and works as shown in the actual video so I’m guessing it works fine on the actual iphone also.

There is also iscroll which does something similar.

It is not a simple fix unfortunately.