jQuery 设置容器和页脚高度答案

【问题标题】：jQuery Setting Container and Footer HeightsjQuery 设置容器和页脚高度
【发布时间】：2012-06-16 08:38:20
【问题描述】：

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

我正在尝试与 TBS 一起工作

【问题讨论】：

有几种策略可以让您的页脚位于底部。Google 粘性页脚 css。
你可以用普通的 css 做到这一点，我之前发布了一个这样的问题的答案，Flushing footer to bottom of the page, twitter bootstrap，这是你要找的吗？
@AndresIlich 你能把这个作为答案发布吗？

标签： jquery height twitter-bootstrap containers footer

【解决方案1】：

诀窍是让页脚粘在底部是创建一个.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。

【讨论】：