jQuery设置容器和页脚高度

时间:2012-06-13 11:35:14

标签: jquery height twitter-bootstrap containers footer

我正在使用$(".container").height($(document).height());设置我的容器100% height,但我想知道有没有办法调整上面的行,以便将footer放在底部?< / p>

我正在尝试使用TBS进行此操作

1 个答案:

答案 0 :(得分:3)

诀窍是让页脚粘到底部是创建一个.wrapper类来包含你的主要内容区域,从而将主容器和页脚分开。像这样:

<强> HTML

<div class="navbar navbar-fixed-top">
  ... fixed navbar ...
</div>

<div class="wrapper">
    <div class="container">
      ... main content area ...
    </div> <!-- /container -->
</div>

<footer class="container">
    <div class="row">
        ... footer area ...
    </div>
</footer>

这样我们就可以使用.wrapper类来推送页脚,但我们也希望使用CSS,我们通过使用Ryan Fait Sticky Footer方法来实现这一点。在引导程序的情况下,为了适应顶部固定导航栏,我们必须首先按照引导程序默认设置向下推动主容器而不是主体。所以我们这样做:

<强> CSS

.wrapper > .container {
    padding-top: 60px;
}

这样我们可以很好地适应顶部导航栏。之后我们只是给页脚一个高度,然后从.wrapper容器消除相同宽度和负边距,如下所示:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -40px;
}

footer {
    height: 40px;
}

请注意,虽然页脚高度必须与您从.wrapper容器中移除的内容完全匹配,因此如果您向页脚添加任何额外的边距或填充或边框,则必须使用负裕度相应地添加到.wrapper容器中。

为了扩展这种方法以支持引导响应样式表,我添加了以下媒体查询:(它们与固定的导航栏内联)

@media (max-width: 979px) {
    .wrapper > .container {
        padding-top:0;
    }

   .wrapper {
        height:auto;
        margin:auto;
        min-height:0;
   }
}

以下是使用此方法的简短演示,此方法应适用于自举的流体和固定容器。

Demo,修改here