如何使用Bootstrap框架将页面的内容区域扩展到完整高度？

Question

我的网站有时在网页的主要部分没有太多内容。然后页脚向上滑动。我希望在所有页面上保持一致的最小高度，使页脚大致接近平均页面的底部。我见过的许多例子从根本上修改了CSS，这与我保持网站响应有关。

在我的Bootply示例中，我希望将柠檬绿区域扩展到＆＃34;填充＆＃34;从导航区域底部到页脚顶部的页面。

My Bootply example

Answer 1

如果您想在屏幕上使用全高，请尝试使用.fill类将代码包围，并将类.fill设置为高度：100％

.fill { 
    min-height: 100%;
    height: 100%;
}

Answer 2

制作body,html{height:100%;}。在主体内容（不包括页脚）周围放置一个类包装器有一个.wrapper{ min-height: 100%; position:relative;}。最后添加.footer{position:absolute;}

以下是扩展答案： Make div stay at bottom of page's content all the time even when there are scrollbars

来自扩展答案的JSFiddle：http://jsfiddle.net/ELUGc/