How to stick footer element at the bottom of the page HTML5 and CSS3

Question

When I use position relative with no content  footer goes up  with absolute with a lot of content  the footer goes down  and with fixed it is always there   Is there a easy way to get  at the end of the page independently of the content  shrinks and grows with content   When there is a lot of content we can see the footer in the first page  and when there is few content we will see at the bottom    lt  DOCTYPE html gt   lt html gt   lt head gt       lt style type  text css  gt          html body               padding  0              margin  0                     header               position fixed              top 0              width 100               height 40px              background-color  333              padding 20px                     footer               background-color   333              width  100               bottom  0              position  relative                     main              padding-top 100px              text-align center               lt  style gt   lt  head gt   lt body gt       lt header gt      header      lt  header gt        lt div id  main  gt      main      lt  div gt        lt footer gt      footer      lt  footer gt   lt  body gt   lt  html gt

User · Answer

just set position  fixed to the footer element  instead of relative   Jsbin example  Note that you may need to also set a margin-bottom to the main element at least equal to the height of the footer element  e g  margin-bottom  1 5em   otherwise  in some circustances  the bottom area of the main content could be partially overlapped by your footer

User · Answer

For footer change from position  relative  to position fixed    footer               background-color   333              width  100               bottom  0              position  fixed              Example  http   jsfiddle net a6RBm

User · Answer

Here is an example using css3   CSS   html  body       height  100       margin  0     wrap       padding  10px      min-height  -webkit-calc 100  - 100px          Chrome        min-height  -moz-calc 100  - 100px          Firefox        min-height  calc 100  - 100px          native       footer       position  relative      clear both      HTML    lt div id  wrap  gt      body content      lt  div gt   lt footer class  footer  gt      footer content      lt  footer gt    jsfiddle    Update As  Martin pointed  the   position  relative   is not mandatory on the  footer element  the same for clear both  These properties are only there as an example  So  the minimum css necessary to stick the footer on the bottom should be   html  body       height  100       margin  0     wrap       min-height  -webkit-calc 100  - 100px          Chrome        min-height  -moz-calc 100  - 100px          Firefox        min-height  calc 100  - 100px          native          Also  there is an excellent article at css-tricks showing different ways to do this  https   css-tricks com couple-takes-sticky-footer

User · Answer

I would use this in HTML 5    Just sayin   footer     position  absolute    bottom  0    width  100     height  60px    background-color   f5f5f5

[html] How to stick <footer> element at the bottom of the page (HTML5 and CSS3)?

Examples related to html

Examples related to css

Examples related to coding-style

Examples related to styles

Examples related to footer