粘性页脚、引导程序和多列组合答案

【问题标题】：Sticky footer, bootstrap and multi-columns combination粘性页脚、引导程序和多列组合
【发布时间】：2013-07-16 11:18:35
【问题描述】：

我正在使用 ryan faits 粘性页脚和 twitter 引导程序的组合。我可以让 twitter boostrap 很好地使用粘性页脚，但是当我有多列时，我不能设置 height:100% 来强制面板接触页脚。

/* 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/

*/

【问题讨论】：

AFAIK，只能使用 JS。你可以吗？
不是最好的，但如果它很快，我猜它必须这样做。

标签： html css twitter-bootstrap sticky-footer

【解决方案1】：

好的，使用javascript，这就是你需要的：

添加对 jQuery 的引用
将 CSS 类 column 添加到必须像列一样工作的每个 div
将以下脚本添加到页面末尾：

$(function(){
    setColumnSize();

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

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

基本上，我们获取页脚距页面顶部的距离，并将其用作列的高度。很简单。

【讨论】：