javascript - 滚动具有 100% 高度固定 div 的页面，该 div 始终位于顶部且不应覆盖页脚

Question

http://jsfiddle.net/9fCfE/1/

.fixed {
width: inherit;
height: 95%;
overflow-x: hidden;
overflow-y: auto;
position: fixed;
}
footer {
width: 100%;
}

固定 div 必须始终位于顶部，并且在我滚动时不应覆盖页脚。100% 高度或从上到下。

我该怎么做？

Answer 1

最简单的答案是删除固定区域的 z-index，以便当它覆盖页脚时，它会移动到它后面。您需要确保页脚是position: relative;.

小提琴示例

相反，如果您希望两者永远不会相交，那么您将面临更大的挑战。

最好的方法是给你的固定元素一个固定的高度，给你的页脚一个固定的高度，并确保固定的元素高度 + 页脚高度 <= 屏幕高度。

小提琴示例

这些确实是您唯一的选择-您基本上必须围绕它进行设计。据我所知，当固定元素与页面上的其他元素相交时，没有办法动态收缩它（毕竟忽略页面上的其余元素是 的目的）。position: fixed

Answer 2

我已经拼凑了一个快速而肮脏的实现，你使用 jQuery 提出的问题offset()，scrollTop()和height()

这是jsfiddle 示例。

这是你想要的吗？如果是这样 - 为什么？:) 我看不出这种方法与固定元素位于页脚下方的方法之间有任何视觉差异。