Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] How to stick the footer at the bottom?

Home Forums Support How to stick the footer at the bottom?

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #52684
    Johandrex

    Hello, I just bought this domain and website today.
    And I wonder how to stick the footer to the bottom since there’s a gap between the bottom end and the footer.

    #52807
    Tom
    Lead Developer
    Lead Developer

    This usually only happens when the page isn’t long enough for the screen you’re using.

    A solution is possible, but it requires javascript, and can be a little hacky.

    There’s also some CSS hacks you can try.

    You’re better off adding more content to the page if you don’t like the gap at the bottom of the screen.

    http://ryanfait.com/sticky-footer/
    http://www.cssstickyfooter.com/

    #53188
    Johandrex

    Neither of those websites codes are working for me, aren’t there any way to fix this?

    #53195
    Johandrex

    Alright if it wouldn’t work, how do I disable the footer

    #53264
    Tom
    Lead Developer
    Lead Developer

    You can disable the footer with this CSS:

    .site-info {
          display: none;
    }

    Unfortunately there’s no easy “fix” – the HTML elements stack as they should, and if the container above the footer are too short for the screen, the footer will appear before the bottom of your screen.

    Let me know if you need anything else 🙂

    #53566
    Johandrex

    Thanks for your help!
    The footer has been disabled.

    #53624
    Tom
    Lead Developer
    Lead Developer
    #103966
    David

    I just thought I would throw this out there. As Tom mentioned, this solution is definitely hacky since I’m hardcoding several pixel offsets for headers, footers, and other formatting. As such, the values will be different for others and some may not be needed. With that said, the following CSS allowed me to force the page to take up the entire height of the window with the footer on the bottom. I haven’t spent enough time ensuring that none of the CSS is redundant or unnecessary but this was what worked for me and functions properly in all modern browsers as far as I could tell.

    * {
        padding: 0;
        margin: 0;
    }
    
    html {
        height: 100%;
        overflow-y: auto;
    }
    
    body {
        height: 100%;
        min-height: 100%;
    }
    
    #page {
        height: calc(100% - 150px);
        overflow: hidden;
        width: 100%; 
        display: table;
        table-layout: fixed;
        margin-bottom: -32px;
    }
    
    #content {
        height: 100%;
        width: 100%;
        display: table-cell;
        table-layout: fixed;
    }
    
    #primary {
        height: 100%;
    }
    
    #main { 
        height: calc(100% - 50px);
    }
    
    article {
        height: 100%;
        padding-bottom: 32px;
    }
    
    .inside-article {
        height: calc(100% - 80px);
    }
    
    .site-footer {
        margin-top: -32px;
        height: 32px;
    } 
    #104002
    Tom
    Lead Developer
    Lead Developer

    Very useful – thanks for posting! 🙂

    #150941
    Tekno Teddy

    Using the cssstickyfooter seemed to work nicely for me. I haven’t tested it thoroughly, but so far I do not have any issues. Adjust the height “50px” accordingly.

    html, body {height: 100%;}
    
    #page {min-height: 100%;}
    
    #content {overflow:auto;
    	padding-bottom: 50px;}  /* must be same height as the footer */
    
    .site-info {position: relative;
    	margin-top: -50px; /* negative value of footer height */
    	height: 50px;
    	clear:both;} 
    
    /*Opera Fix*/
    body:before {
    	content:"";
    	height:100%;
    	float:left;
    	width:0;
    	margin-top:-32767px;/
    }
    

    Thanks!

    #150952
    Tekno Teddy

    I changed the height under site info to min-height. This seems to work better for me ;).

    #151034
    Tom
    Lead Developer
    Lead Developer

    Thanks for posting your solution! 🙂

    #163488
    Krzysztof

    For one of my sites I use that code:

    html, body{
    height:100%;
    }
    .site-footer{
    bottom:0;
    position:relative;
    }

    Everything works except sticky menu – always moves page to the top after menu show. Any ideas to fix that?

    #163628
    Tom
    Lead Developer
    Lead Developer
    #163646
    Krzysztof

    @Tom check my site jix.im. Sticky menu is only on mobile.

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.