Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Place footer at the absolute bottom.

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #207376
    jLinux
    Participant

    Im trying to implement a footer for my website, and it needs to be at the very bottom of the page.

    If the content of the page is only a few lines long, then I need the footer to NOT be right below that, but rather, all the way at the bottom.

    However, if the content of the page is more than 100% of the page height, then I need the footer to be just below the content.

    The CSS I have now will place it at the bottom if the content is less than 100%, but if its more than 100%, it will place the content at the bottom of the window (not the bottom of the content), and put it under the content.

    That result isnt terribly bad, except that I have a timeline on one of my pages, so as you scroll, you see the footer between items..

    Broken code:

    .footer {
    padding: 10px 0;
    margin: 0 25px 0 245px;
    border-top: 1px solid #CAD0D6;
    line-height: 20px;
    bottom: 0 !important;
    z-index: -10000;
    width: 80%;
    position: fixed;
    }

    Thanks for any help!

    P.S. JSFiddle: https://jsfiddle.net/a5L31w7f/

    #207393
    Shikkediel
    Participant

    Something like this?

    https://jsfiddle.net/y4khjejs/

    #207400
    jLinux
    Participant

    Hey… nice, I thought you couldn’t get it without JS ;-) Thanks man, good job

    I’ll implement it on my app and make sure it works. it preferably should work without having to edit the existing content of each page, so ill see

    #207402
    Shikkediel
    Participant

    Yeah, edited afterwards. Lol. It was missing the obvious position: relative on body so the absolute element would act as having fixed position and be placed at the bottom of the screen instead of the document.

    I changed the CSS of .box a bit because the margins were messing up the height of body. This is probably not necessary on the final HTML but I guess it’s more about the general idea anyway.

    Cheers.

    #207405
    jLinux
    Participant

    I updated it so the padding isnt on the last box, but rather on the page content.

    https://jsfiddle.net/y4khjejs/4/

    #207407
    Shikkediel
    Participant

    Seems to work like a charm. :-)

    #207485
    jLinux
    Participant

    Looks like the main thing I was missing was

    body {
      min-height: 100vh;
      position: relative;
      margin: 0;
    }
    

    the min-height and position seemed to do the trick.

    #207489
    Atelierbram
    Participant

    Solution couldn’t be more minimalistic, +1 for that.

    Have an example here with a similar, but more conservative, approach using min-height: 100% ISO viewport-units.

    And there’s this classic which is more “flexible“, because it doesn’t use absolute positioning. Meaning: would there be a need to put more stuff in the footer, social-media links for example, then positioning will be easier to accomplish. In my example I use flexbox inside of the footer to position the links.

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.