Search code examples
htmlcsstwitter-bootstrapsticky-footer

Sticky footer, bootstrap and multi-columns combination

Im using a combination of ryan faits sticky footer and twitter bootstrap. I CAN get twitter boostrap to work with sticky footer fine, but when I have multicolumns, I cant set height:100% to force panels to touch the footer.

/* style.css */

body {
    background-color: #eeeeee;
}

.footer {
    background-color: #fff;
}

#left-panel {
    height: 100%;
    background-color:#f00;
}

#center-panel {
    height: 100%;
    background-color:#ff0;
}

#right-panel {
    height: 100%;
    background-color:#0ff;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test</title>

<!-- Start Bootstrap CSS and JS -->
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.min.css" type="text/css" />

<script type="text/javascript" src="/bootstrap/js/bootstrap.min.js"></script>
<!-- End Bootstrap CSS and JS -->

<link rel="stylesheet" href="/css/sticky_footer.css" type="text/css" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />

<script type="text/javascript" src="/js/script.js"></script>

</head>

<body id="index" class="home">


<div class="wrapper">

        <div class="container" style="min-height:100%">

            <div class="row-fluid" style="min-height:100%">
                <div class="span3" id="left-panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.</div>
                <div class="span6" id="center-panel">fff</div>
                <div class="span3" id="right-panel">ffff</div>
            </div>

        </div>

        <div class="push"></div>

</div>
<div class="footer"></div>

</body>
</html>

/* sticky_footer.css */

* {
    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 */
    clear: both;
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/
Solution

  • ok, using javascript, this is what you need:

    1. Add a reference to jQuery
    2. Add the CSS class column to each div that must act like a column
    3. Add the following script to the end of your page:
    $(function(){
    setColumnSize();

    $(window).resize(function () { setColumnSize(); });
});

function setColumnSize() {
    $('.column').css('height', $('.footer').position().top);
}

    Basically, we're getting the footer distance from the top of the page and using that as the height of the columns. Pretty simple.