MINIMUM Theme: how to KEEP FOOTER DOWN on short pages

Community Forums Forums Design Tips and Tricks MINIMUM Theme: how to KEEP FOOTER DOWN on short pages

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  bcoco 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #51225

    LenaGV
    Participant
    Post count: 1

    HELP: In Minimum Theme, I would like to keep the footer at the bottom of the browser for short pages, and to have it at the end of content for long pages.

    FOUND but NOT working: Among others, I found two almost identical suggestions that I can not make work; here is one of two links:

    IF you can make this solution work, LET ME know WHAT code you place WHERE (in what file and the exact place in the file).

    NOTE: I do NOT want a sticky footer — it does not work well for all of my current and future pages.

    MY SITE: gordanavukovic.com
    (artist and information designer&usability)

    Thank you!

    http://gordanavukovic.com
    #51227

    LenaGV
    Participant
    Post count: 1

    ADDITION:
    In “FOUND but NOT working” above, after submitting my question the link I included didn’t show up…here it is again:

    http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

    LenaGV

    #57798

    bcoco
    Participant
    Post count: 11

    Hi Gordana,

    This worked for me, using Genesis 2 and it’s HTML5 structure:

    
    /* Sticky Footer 
    ------------------------------------------------------------ */
    html,
    body {
       margin:0;
       padding:0;
       height:100%;
    }
    .site-container {
       min-height:100%;
       position:relative;
    }
    header {
       padding:10px;
    }
    #site-inner {
       padding:10px;
       padding-bottom:120px;   /* Height of the footer */
    }
    footer {
       position:absolute;
       bottom:0;
       width:100%;
       height:120px;   /* Height of the footer */
    }
    
    #57924

    bcoco
    Participant
    Post count: 11

    Oh, and if you’re still using the Genesis 1.x structure, then this also works (or did for me, but I haven’t tested in on Minimum yet) :

    ‘/* Sticky Footer
    ———————————————————— */
    html,
    body {
    margin:0;
    padding:0;
    height:100%;
    }
    #wrap {
    min-height:100%;
    position:relative;
    }
    #header {
    padding: 10px;
    }
    #inner {
    padding: 10px;
    padding-bottom:120px; /* Height of the footer */
    }
    #footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:120px; /* Height of the footer */
    }’

    note: you may have to play with the padding values for the header and inner divs, since they could be overwritten elsewhere in your css, or need to be

    Hope that helps!

    • This reply was modified 8 months ago by  bcoco.
    • This reply was modified 8 months ago by  bcoco.
    #57937

    bcoco
    Participant
    Post count: 11

    Shoot, sorry – messed up the first one:

    #site-inner should be .site-inner (class, not id). My bad.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.