我有一个 <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 有固定的位置，当页面滚动时，它停留在同一个地方。
谢谢，任何帮助将不胜感激!
最佳答案
以下应该可以解决问题: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/
*/
关于HTML - 基于滚动的位置页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24581641/