While working on trying to keep the footer at the bottom irrespective of the browser being used or content length, I faced a lots of problems. Whenever I was trying to fix the issue it was violating in a different browser. Finally I got a trick….
steps: 1) Keep all your body content(except footer) in a Div, you can name it as “maindiv”. 2) Keep the Footer inside a new Div, lets be “footerdiv”. Now follow following CSS:
1) In put
html,body { height:100%; }
2) In “maindiv” use style :
* Remember the “min-height” and “_height” are compulsory. Both have the Same functionality, but “min-height” does not work for IE. So, keep “_height” just to make the things work in IE too.
3) Finally, in “footerdiv” use style :
* Remember in both cases the position must be “relative”.
How it Works:
– We used the Position Relative in both cases that means both the DIVs will stand relative to each other, so that their contents will not able to misplace them at any situation.
– In many cases, we may have to add a new “margin-bottom” in “maindiv” style and its value should be -Ve of the height of the “footerdiv”. i.e -50px in our case.
– We can modify the value of “min-height” or “_height” to any other value(may be 100%, 85% etc…), as per our requirement. The Value simply represents the height of the div with respect to the Window size of the Monitor. We can chose the same by keeping less amount of content and watching the effect in the Browser.