Search code examples
htmlcssfooter

HTML: how can I get my footer in the bottom of my website?


I'm not a newbie to css and html, but totally not smart with php. Can someone tell me what to edit to have the grey bar at the bottom of my website (even when the content doesn't push the bar to the bottom?

Here is the link to one a the pages containing a footer not in place (in Dutch) Perhaps I looked over the problem to many times, but I can't find it (bed time?)

Note: I use a 23" screen at 1920 x 1080

Footer not Footer bad good:

Footer Footer also bad also bad


Solution

  • If you want the footer to always be at the bottom of the browser window, try the sticky CSS footer code. (More results on Google)

    EDIT:

    It seems that the first part of my answer is what you want, but I'm keeping this anyway.

    If you want to keep the footer in view (even when there's more code) then you will need to use the following css:

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

    Note, that code may not work properly on mobile devices like iPad.