HTML - 基于滚动的位置页脚

Question

我有一个 <div>它从上到下填充窗口，除了 66px 高的标题。 <div>有固定的位置，所以页面的滚动发生在 <div> 里面，不在浏览器窗口中。如果<div>的内容距离 <div> 底部不到 56px ，这是页脚的顶部，我希望页脚显示在底部。如果内容确实从 <div> 底部达到 56px ，并且过了那一点，我希望页 footer 分或完全隐藏，具体取决于内容的范围，并在页面底部滚动显示内容。这可能听起来有点困惑，所以这里是基本布局:

---

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: 页 footer 分被内容推开，但当页面向下滚动时会完全显示出来。

---

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/

*/