页面底部的引导页脚[关闭]

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