toefftoefftoeff toefftoefftoeff - 4 months ago 23
HTML Question

Twitter-Bootstrap: Content is overlapping sticky-footer

My content is overlapping my footer (which is sticky). But it should have a normal padding-top. How I use CakePHP (not relevant) and Twitter Bootstrap.
On some pages it works, and on other not. How can I fix this?

CSS

body {
padding-top: 60px;
}
.sidebar-nav {
padding: 9px 0;
}

html, body {
height: 100%;
}
footer {
padding: 17px 0 18px 0;
border-top: 1px solid #000;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -63px;
}
.push {
height: 63px;
}


HTML

<div class="container-fluid wrapper">
<div class="row-fluid">
<div class="span11">
//content
</div>
</div>
</div>

<footer class="footer">
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
</div>
<div class="span4">
<div class="footer-links pull-right>
//content
</div>
</div>
</div>
</div>
<div class="footer-floor">
<div class="container-fluid">
//content
</div>
</div>
</footer>

Answer

In order for the sticky footer to work, you have to set heights for both .push and .footer. Try adding the 63px height to your footer as well.

.push, footer {
height: 63px;
}