jQuery设置容器和页脚高度

Question

我正在使用$(".container").height($(document).height());来设置我的容器100% height但我想知道是否有一种方法来适应上述行，以便它将我的footer放在底部？

我试图用TBS

Answer 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; 
    } 
} 

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