jQuery设置容器和页脚高度

Question

我使用的是$（“.container”）。高度（$（文档）。高度（）设置我的容器100%高度，但我想知道是否有办法调整上面的行，以便将我的页脚放在底部？

我正在努力与TBS合作

Answer 1

诀窍是让页脚粘到底部，这会创建一个。包装器类来包含主内容区域，从而将主容器和页脚分开。比如：

超文本标记语言

<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 {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -40px;
}

footer {
    height: 40px;
}

但是请记住，页脚高度必须与要从中删除的内容完全匹配。包装容器，因此，如果在页脚上添加任何额外的边距、填充或边框，则必须使用添加到的负边距进行补偿。相应地包装容器。

为了扩展这种方法来支持引导响应样式表，我添加了以下媒体查询：（它们与固定导航栏内联）

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

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

这里有一个简短的演示，这种方法应该适用于自举的流体和固定容器。

演示，在这里编辑。