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>
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Provide a link to your webpage as I can’t replicate your issue.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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%;
}
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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..
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Oresundsgruppen, may you post a new topic and link to this thread if necessary? You’re more likely to receive help this way.
