CODEWITHSUNDEEP
htmlcsssticky-footer
dh762
dh762

Reputation: 2429

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>

Upvotes: 5

Views: 2825

Answers (2)

gonzalo.vinas
gonzalo.vinas

Reputation: 71

Make your footer somehow z-index over sidebar z-index.

Upvotes: 0

Michelle
Michelle

Reputation: 2712

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

Upvotes: 4

Related Questions