底部带有可变内容的页脚答案

【问题标题】：Footer on bottom with variable content底部带有可变内容的页脚
【发布时间】：2015-11-14 10:03:46
【问题描述】：

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

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

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

我指的代码：

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

在这种情况下，页脚太低，以至于滚动到顶部时您看不到它。但是对当前功能的任何更改都不会让我从底部移动的页脚到在表格下方停止的页脚平滑过渡（单击“缩小内容！”，滚动到底部并减小/增加窗口大小）。当内容最小化并且页面滚动到顶部时，我希望页脚在底部可见！

之前

之后

【问题讨论】：

我要给你一个强烈的建议：如果不是绝对必要，不要使用 Javascript 操作 CSS。相反，根据需要向元素添加类 - 它将 CSS 保留在它所属的位置，并且可能更高效......但不要让我这样做。
但这是必要的，页脚如何知道页面内容何时太小而无法停留在底部？

标签： javascript jquery css footer

【解决方案1】：

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

对于不依赖于固定高度的纯 CSS 解决方案，请使用 display: table。

CSS

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

HTML

<div class="content">
    <p>Main content goes here.</p>
</div>
<footer class="smallFooter">
    <p>Footer content goes here</p>
</footer>

通过this fiddle查看它的实际应用

【讨论】：