滚动页面，其中100％高度的固定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;。

Fiddle example

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

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

Fiddle example

这些是你唯一的选择 - 你必须围绕它进行设计。据我所知，当它与页面上的其他元素相交时，无法动态缩小固定元素（忽略页面上的其余元素是{{1>的目的毕竟）。

Answer 2

我拼凑了一个使用jQuery，offset()，scrollTop()和height()

所要求的快速而肮脏的实现

这是jsfiddle example。

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