我$(".container").height($(document).height());
用来设置我的容器100% height
,但我想知道有没有办法调整上面的行,以便将我footer
的放在底部?
我正在尝试与 TBS 一起工作
我$(".container").height($(document).height());
用来设置我的容器100% height
,但我想知道有没有办法调整上面的行,以便将我footer
的放在底部?
我正在尝试与 TBS 一起工作
诀窍是让页脚粘在底部是创建一个.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;
}
}
这是此方法的简短演示,此方法应适用于引导程序中的流体和固定容器。