How to stick a footer to bottom in css

Question

I am having the classic problem for the positioning of a Footer on the bottom of the browser  I ve tried methods including http   ryanfait com resources footer-stick-to-bottom-of-page  but to no good result  my footer always keeps appearing in the middle of the browser window in both FF and IE    In the HTML i got this simple structure   lt form gt         lt div class Main   gt    lt div id Footer   gt   lt  form gt    Here is the css code that is relevant for the css footer problem                       margin  0          html  body       height  100            Footer               background-color   004669          font-family  Tahoma  Arial          font-size  0 7em          color  White          position  relative          height  4em                Main               position relative          min-height 100           height auto  important          height 100              top  50px             margin  0 25  -4em 25            font-family  Verdana  Arial  Tahoma  Times New Roman          font-size  0 8em          word-spacing  1px          line-height  170             padding-bottom  40px            Where am I doing wrong  I really have tried everything   If I missed any useful info please let me know   Thank you for any suggestion in advance   Regards     thank you all for your answers  it worked with   position absolute      width 100       bottom 0px    setting position fixed did not work in IE for some reason Still showed footer in the middle of the browser   only worked for FF

User · Answer

I think a lot of folks are looking for a footer on the bottom that scrolls instead of being fixed, called a sticky footer. Fixed footers will cover body content when the height is too short. You have to set the html, body, and page container to a height of 100%, set your footer to absolute position bottom. Your page content container needs a relative position for this to work. Your footer has a negative margin equal to height of footer minus bottom margin of page content. See the example page I posted.

Example with notes: http://markbokil.com/code/bottomfooter/

User · Answer

Try setting the styles of your footer to position absolute  and bottom 0

User · Answer

This worked for me    footer     width  100     bottom  0    clear  both

User · Answer

For modern browser  you can use flex layout to ensure the footer stays at the bottom no matter the content length  and the bottom won t hide the content if it is too long   HTML Layout    lt div class  layout-wrapper  gt     lt header gt My header lt  header gt     lt section class  page-content  gt My Main page content lt  section gt     lt footer gt My footer lt  footer gt   lt  div gt    CSS   html  body     min-height  100vh    width  100     padding  0    margin  0      layout-wrapper       min-height  100vh      display  flex      flex-direction  column      justify-content  space-between      layout-wrapper  gt   page-content     background  cornflowerblue    color  white    padding  20px      layout-wrapper  gt  header   layout-wrapper  gt  footer     background   C0C0C0    padding  20px 0      Demo  https   codepen io datvm pen vPWXOQ

User · Answer

So a Mixed Solution from  nvdo and  Abdelhameed Mahmoud worked for me footer       position  sticky      height  100px      top  calc  100vh - 100px

User · Answer

Footer     position fixed    bottom 0      That will make the footer stay at the bottom of the browser window no matter where you scroll

User · Answer

I had a similar issue with this sticky footer tutorial  If memory serves  you need to put your form tags within your  lt div class Main   gt  section since the form tag itself causes issues with the lineup

User · Answer

Assuming you know the size of your footer  you can do this      footer           position  sticky          height  100px          top  calc  100vh - 100px

User · Answer

If you use the  position fixed  bottom 0   your footer will always show at the bottom and will hide your content if the page is longer than the browser window

User · Answer

Footer   position fixed  bottom 0  width 100       worked for me

User · Answer

footer  position  fixed   bottom  0      http   codepen io smarty tech pen grzMZr

User · Answer

I agree with Luke Vo s solution  I thought it would better to omit justify-content  space-between  from layout-wrapper and add margin-top  auto  to footer  You wouldn t want your body to be hanging in the middle and only have footer pushed to the bottom  This approach addresses any content extending beyond the viewport

User · Answer

The following css property will do it  position  fixed    I hope this help

[css] How to stick a footer to bottom in css?

Examples related to css

Examples related to sticky-footer