页面底部的Bootstrap页脚

Question

我试图让我网站的页脚始终位于底部。我希望内容区域至少具有视口的高度。在视口中的含义，您应该在op上看到header。中间的content部分和底部的footer部分。如果文章长度超过视口，则页脚应该向下，内容部分应该更长。

这是我的代码http://bit.ly/1Bl3Jd5

非常感谢。

Answer 1

您需要将.container和.footer与另一个容器包装在一起并应用样式：

#fullheight {
    position: absolute;
    display: table;
    height: 100%;
    width: 100%;
    z-index: 2;
    overflow: hidden;
    top: 0;
    left: 0;
    padding-bottom: 146px;
}

对于页脚，您需要添加：

position: absolute;
bottom: 0;

http://jsfiddle.net/vmjc1w2q/

降低预览高度以查看效果。

修改

如果您想要其他行为，请尝试以下方法：

footer {
    width:100%;
    height:143px;
    position:fixed;
    bottom:0;
    left:0;
}

Answer 2

要强制页脚始终可见，请将其位置设置为绝对值。

CSS：

#footer {
    width:100%;
    height:143px;
    position:absolute;
    bottom:0;
    left:0;
}

编辑：现在我得到了你想要的东西。 http://www.cssstickyfooter.com/显示了如何归档行为：

CSS：

html, body { height:100%; }

#main { padding-bottom: 143px; }

#wrapper {
    position: relative;
    min-height:100%;
}

#footer {
    width:100%;
    height:143px;
    position:absolute;
    bottom:0;
    left:0;
}