[Resolved] Stick footer to bottom of short pages

Home Forums Support Stick footer to bottom of short pages

  • This topic has 5 replies, 3 voices, and was last updated 4 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1451518
    Sam

    Hello,

    Is there a built in option to “stick” the footer to the bottom of the pages? I’m not asking to use “position: fixed;” which would always keep the footer visible, rather more as described here:

    https://css-tricks.com/couple-takes-sticky-footer/

    On pages with not a lot of content (eg a contact page), having the footer appear above the actual bottom of the browser window looks bad.

    Thanks!

    #1451531
    Elvin
    Customer Support

    Hi Sam,

    You can try the “flexbox” approach provided on the link you’ve given.

    You can try this code:

    html, body {
      height: 100%;
    }
    body {
      display: flex;
      flex-direction: column;
    }
    
    #page {
      flex: 1 0 auto;
    }
    
    .site-footer{
    flex-shrink: 0;
    }

    #page is GP theme’s id selector for content. .site-footer is the class selector for its footer. This should work assuming no stray blocks are added between the content and the footer.

    Let us know if it works for you.

    A wise man once said:
    "Have you cleared your cache?"

    #1451547
    Sam

    Hmm not quite, that is doing something to the width of pages without sidebar widgets. It’s also creating an unnecessary vertical scrollbar.

    I’ve included the site URL in the private info section.

    #1451770
    David
    Staff
    Customer Support
    #1453146
    Sam

    Thanks David, I think that will work out for me. Would be cool to see this option built in 👍

    #1453370
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.