页面底部的页脚，包含动态内容区

Question

我正在使用AngularJS和Bootstrap构建应用程序。页面结构相当普遍，因为有一个包含nav，内容部分和页脚的标题区域。我试图让页脚显示在内容区域的底部，如果内容区域的高度小于浏览器窗口高度的高度，则显示在浏览器窗口的底部。 / p>

This method here有效。

但是，作为Angular应用程序，内容是动态生成的，通常比浏览器窗口高度长。在这种情况下，页脚位于浏览器窗口的底部，位于动态生成内容的顶部。我需要在动态生成的内容后显示页脚。理想情况下，这应该仅使用CSS完成，但我也可以使用JS解决方案。

任何指针？

非常感谢。

Answer 1

使用适当的jsfiddle尝试此代码：

Footer Demo

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px;
    /* bottom = footer height */
    padding: 25px;
}
footer {
    background-color: orange;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
    overflow:hidden;
}