底部的页脚，内容可变

Question

我需要对部分解决方案进行一些合理的审查，我不满意。我的页面上有一个表（使用DataTables创建），因此有动态内容，这意味着表的高度和宽度可能会有所不同。该表嵌入了三个div包装器（是的，它们是必需的），我必须控制最外层的高度，以便页脚停留在页面的底部。

JSFiddle： http://jsfiddle.net/5hh9H/158/

这种方法很好，除非表格的内容高度和页脚高度小于窗口高度。

代码I指的是：

if ($(window).height() < $("#wrapper").height()) {
    $("#table-container").height($("#wrapper").height());
} else {
    if ($(window).height() > $("#wrapper").height() + $("#footer").height() + 45) {
        $("#table-container").height($(window).height() - $("#footer").height() - 45);
    } else {
        //Don't know, if this is necessary vv
        $("#table-container").height($("#wrapper").height());
    }
}

在这种情况下，页脚太低，以至于滚动到顶部时无法看到它。但是，当前功能的任何改变都不能让我从页脚移动到底部到页脚的平滑过渡（点击＆＃34;缩小内容！＆＃34;，滚动到底部并减小/增加窗口大小）。当内容最小化并且页面滚动到顶部时，我希望页脚在底部可见！

BEFORE

AFTER

Answer 1

查看this question上的答案。有几种方法可以做到这一点。接受的答案有限制，页脚必须有一个固定的高度。我提出的答案不是（不是说我的答案更好，我确定它有自己的缺点）。

对于不依赖于固定高度的仅限CSS的解决方案，请使用compile 'org.richfaces.core:richfaces-core-api:4.3.7.Final' compile 'org.richfaces.core:richfaces-core-impl:4.3.7.Final' compile 'org.richfaces.ui:richfaces-components-api:4.3.7.Final' compile 'org.richfaces.ui:richfaces-components-ui:4.3.7.Final' 。

<强> CSS

display: table

<强> HTML

html, body {
    height: 100%;
}
body {
    display: table;
    width: 100%;
}
.content {
    display: table-row;
    height: 100%;
}
.smallFooter {
    display: table-row;
    height: 1px;
}

使用this fiddle

查看此操作