HTML - 基于滚动的位置页脚

Question

我有一个<div>，它从上到下填充了窗口，除了 66 像素高的标题。 <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>就是我本题一开始说的那个。 header 有固定的位置，当页面滚动时保持在同一个位置。

谢谢，任何帮助将不胜感激！

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/

*/