WordPress.org

Support

Support » Themes and Templates » Sticky Footer twenty twelve?

Sticky Footer twenty twelve?

  • 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?

Viewing 15 replies - 1 through 15 (of 21 total)
  • 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>

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    What do you mean by Sticky Footer?

    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.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    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.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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;
    }
    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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%;
    }

    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%;
    }

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Excellent.

    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..

    Moderator Andrew Nevins

    @anevins

    Forum moderator

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

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘Sticky Footer twenty twelve?’ is closed to new replies.