WordPress.org

Forums

Sticky Footer twenty twelve? (22 posts)

  1. bowenac
    Member
    Posted 2 years ago #

    Curious if anyone has been able to get a sticky footer working on twenty twelve theme. I took the twenty twelve theme and have made a starter theme out of it and I can't seem to get a sticky footer working.

    Seems to be something with the body... I can't set it to min-height:100% so the wrap I made can't set to min-height:100% either. Anyone know what would be causing this?

  2. bowenac
    Member
    Posted 2 years ago #

    No one? Figured someone would have attempted this by now. Anyways this is my structure... I have placed the footer outside of the page...

    <html> Set to min height 100% Works
    <body> Set to min height 100% Doesn't work
    <wrap> Set to min height 100% Doesn't work
    <site-navigation>
    <page>

    <page>
    <site-navigation>
    <wrap>

    <footer>

    <footer>
    <body>
    <html>

  3. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    What do you mean by Sticky Footer?

  4. bowenac
    Member
    Posted 2 years ago #

    A footer that sticks to bottom of page... like this example.

    http://www.wordimpressed.com/wordpress/put-a-css-sticky-footer-in-your-wordpress-theme/

    I have done this many times in the past with no problems. But for some reason I can't get this to work on 2012... something with the body or something else is causing the body to only be about half the height of the view space.

  5. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

  6. bowenac
    Member
    Posted 2 years ago #

    That would produce the same thing... the problem I am having is that I can't set the body to 100% height... I think it is being set to 100% of the document not the viewport for some reason.

  7. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    Try asking your query in a forum that specialises in CSS support
    http://csscreator.com/forum

  8. bowenac
    Member
    Posted 2 years ago #

    This isn't a css problem I know how to do the css as I have stated above and provided examples. It is something with twenty twelve theme.

  9. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    Provide a link to your webpage as I can't replicate your issue.

  10. bowenac
    Member
    Posted 2 years ago #

  11. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    What issue do you think it could be other than CSS?

    You need to wrap your footer and container in a <div>,
    E.g

    <body class="home page page-id-6 page-template-default custom-background custom-font-enabled single-author">
     <div id="wrapper"> <!-- wrapping footer and container -->
      <div class="container">
      ...
       <div class="footer">
        ...
       </div>
      </div>
     </div> <!-- end wrapping footer and container -->
     ...
    </body>

    Then apply the following CSS (as exampled from the tutorial I posted)

    body {
     margin:0;
     padding:0;
     height:100%;
    }
    
    #wrapper {
     min-height:100%;
     position:relative;
    }
    
    .footer {
     position: absolute;
     bottom: 0;
    }
  12. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    Sorry, the first section of CSS applied should include a html selector with the body, E.g

    html,
    body {
     margin:0;
     padding:0;
     height:100%;
    }
  13. bowenac
    Member
    Posted 2 years ago #

    I ended up getting it, I had other conflicting body tags, and min-height wasn't working but height worked. I ended up using the one I posted, I attempted yours in firebug and couldn't get it to work. Thanks for quick responses.

    I went with

    <body class="home page page-id-6 page-template-default custom-background custom-font-enabled single-author">
     <div class="container">
    
     <div class="footer">
    </body>

    CSS

    body, html{height:100%;}
    .container {
        min-height: 100%;
    }
    .footer {
        background-color: Black;
        height: 100px;
        margin-top: -100px;
        width: 100%;
    }
  14. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    Excellent.

  15. O Gruppen
    Member
    Posted 2 years ago #

    Im totally new at wordpress, just wondering where you put the:

    <body class="home page page-id-6 page-template-default custom-background custom-font-enabled single-author">
    <div class="container">

    <div class="footer">
    </body>

    I understand that that style.css should be configured in a childtheme but have no clue for the code above..

  16. Andrew
    Forum moderator & snail smusher
    Posted 2 years ago #

    Oresundsgruppen, may you post a new topic and link to this thread if necessary? You're more likely to receive help this way.

  17. O Gruppen
    Member
    Posted 2 years ago #

    ok but i thought it would be unecessary to start a new topic..specially when you guys seem to know what your´re talking about..

  18. ok but i thought it would be unecessary to start a new topic

    Unless you're contributing to the problem the OP has, you're interrupting and that's not polite. Besides posting your own topic will get you the best support for your problem. That's not too bad. ;)

    http://wordpress.org/support/forum/themes-and-templates#postform

  19. bowenac
    Member
    Posted 2 years ago #

    Oresundsgruppen

    Yours may be different but the body tag is going to be in your header.php, you shouldn't need to worry about any of the html tags, you should already have a html, body, and footer tag. I added the container tag.

  20. O Gruppen
    Member
    Posted 2 years ago #

    Thank you for your reply bowenac!

    where in the header do I put in the code? can´t make it work.. maybe im pasting the code in the wrong place :S

  21. thecodewillsetyoufree
    Member
    Posted 2 years ago #

    This worked for me:

    Surround the footer (and whatever else to be stuck at the bottom) with:
    <div id="stuff-at-the-bottom"></div>

    CSS

    * { margin:0; padding:0; }
    html { margin:0; padding:0; height:100%; }
    #stuff-at-the-bottom { position:absolute; bottom:0;}
    body { height:100%; }
    body .site {
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    position:relative;
    min-height: 100%;
    }
    #page { padding-bottom:150px; } /* whatever clearance is needed*/

  22. Janelle
    Member
    Posted 1 year ago #

    Thank you so much bowenac! I'd been struggling with this all morning, and your post saved me.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.