HTML - 基于滚动的位置页脚

Question

我有一个<div>，从顶部到底部填充窗口，除了66px高的标头。 <div>具有固定位置，因此页面的滚动发生在<div>内，而不是在浏览器窗口中。如果<div>的内容未从<div>（页脚顶部）的底部达到56px，我希望页脚显示在底部。如果内容确实从<div>的底部达到了56px，并超过了这一点，我希望页脚部分或完全隐藏，具体取决于内容的移动距离，并显示内容页面底部的滚动条。这听起来有点令人困惑，所以这里是基本布局：

---

How the page should look when the content does not reach the bottom: 页脚在窗口底部保持可见。

---

How the page should look when the content goes past 56px from the bottom: 页脚被内容推开，但页面向下滚动时会完全显示。

---

How the page should look when the content goes past the bottom: 页脚完全被推离屏幕，但在页面向下滚动时会显示。

---

我希望这一切都有道理。我并不认为发布我的代码会很有用，因为它主要是由图像解释的。页眉，页脚和内容都是<div> s，内容<div>是我在本问题开头时讨论的内容。标题具有固定位置，并在页面滚动时保持在同一位置。

谢谢，非常感谢任何帮助！

Answer 1

以下应该可以解决问题：http://ryanfait.com/sticky-footer/

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
    height: 155px; /* '.push' must be the same height as 'footer' */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/