HTML-基于滚动的页面页脚定位

我有一个

，它从上到下填满了窗口，除了66像素高的标题。

具有固定位置，因此页面的滚动发生在

内部，而不是在浏览器窗口中。如果

的内容从

底部（即页脚顶部）未达到56px，我希望页脚显示在底部。如果内容从

底部到达56px，并超过该点，我希望页脚部分或完全隐藏，具体取决于内容的距离，并在页面底部显示带有滚动条的内容。这听起来可能有点令人困惑，因此以下是基本布局：

---

当内容未到达底部时页面的外观：

页脚在窗口底部保持可见

---

当内容从底部超过56px时，页面的外观：

页脚部分被内容挤出，但在向下滚动页面时会完全显示出来

---

当内容越过底部时页面的外观：

页脚完全从屏幕上推出，但在向下滚动页面时会显示出来

---

我希望这一切都有意义。我不认为发布我的代码会有用，因为它主要是由图片解释的。页眉、页脚和内容都是

s，而内容

就是我在这个问题的开头所说的内容。页眉具有固定位置，并且在页面滚动时保持在同一位置

---

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

以下几点可以做到：

---

我看了这个，看起来不错，这不是一个很长的解决方案。如果你在回答中包含了CSS，那就谢谢你了。

* {
    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/

*/