0

我使用 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/

*/
4

1 回答 1

1

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

  1. 添加对jQuery的引用
  2. 将 CSS 类添加column到每个div必须像列一样的行为
  3. 将以下脚本添加到页面末尾：
$(function(){
    setColumnSize();

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

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

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

于 2013-07-17T19:23:53.227 回答