Question

我使用ryan faits粘性页脚和twitter bootstrap的组合。我可以使用twitter boostrap来处理粘性页脚，但是当我有多列时，我无法设置高度：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/

*/

Answer 1

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

添加对 jQuery
将CSS类column添加到必须像列

div

将以下脚本添加到页面末尾：

$(function(){
    setColumnSize();

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

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

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

粘性页脚，自举和多列组合

1 个答案: