javascript - 底部带有可变内容的页脚

Question

我需要对我不满意的部分解决方案进行逻辑审查。我的页面上有一个表格(使用 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());
    }
}

在这种情况下，页脚太低，滚动到顶部时您将看不到它。但是，对当前功能的任何更改都无法实现从页脚随底部移动到页脚停止在表格下方的平滑过渡(单击“缩小内容!”，滚动到底部并减小/增大窗口大小)。当内容最小化并且页面滚动到顶部时，我希望页脚在底部可见!

之前

之后

Answer 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 查看实际效果