Issue
I have a simple 2-column layout with a footer that clears both the right and left div in my markup. My problem is that I can't get the footer to stay at the bottom of the page in all browsers. It works if the content pushes the footer down, but that's not always the case.
Solution
To get a sticky footer:
Have a
<div>
withclass="wrapper"
for your content.Right before the closing
</div>
of thewrapper
place the<div class="push"></div>
.Right after the closing
</div>
of thewrapper
place the<div class="footer"></div>
.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
<div class="wrapper">wrapper
<div class="push">push</div>
</div>
<div class="footer">footer</div>
Answered By - Staale
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.