移动页面中固定页眉/页脚的内容滚动

Question

你好，我正在构建一个移动网页，其中我的内容只会滚动，而我的页眉和页脚是position:fixed的 - 我可以使内容不会在页眉或页脚下滚动，以便它只在自己的div中滚动吗？

我之所以想这样做是因为我将在我的页眉和页脚上放置一些不透明度，如果内容被滚动到下面，它看起来就不好看。

这是我制作的一个jsfiddle，只是为了向您展示滚动的示例。

http://jsfiddle.net/VNVqs/

- Fruxelot

---

你应该移除所有的绝对定位，并给滚动内容或包装器一个固定高度，或者使用overflow:auto。同时移除页眉和页脚的fixed定位。请参考：http://jsfiddle.net/VNVqs/ - SVS

Answer 1

在这里：

http://jsfiddle.net/VNVqs/3/

我只是将滚动部分（wrapper和scroll-content）的position: absolute删除，并为包装器添加了一些填充，以使第一个和最后一个项目不会位于页眉和页脚下方。

基本上，技巧是仅在页眉和页脚上使用position: fixed，并让页面的其余部分像普通页面一样滚动，而不是在特定的固定高度元素上使用overflow: auto。这样做的唯一问题是内容的第一行将始终位于固定位置的页眉下方（最后一行位于页脚下方），但您可以通过在内容包装器上应用与页眉（和页脚）高度相同的填充来解决此问题。明白了吗？

- lorenzo-s

---

谢谢，但是内容仍然出现在页眉和页脚下面 - 或许我在解释问题时有点含糊。我给页眉和页脚添加了一些不透明度。我只是不希望任何内容能够滚动到页眉或页脚下面 - 这可能吗？http://jsfiddle.net/VNVqs/4/ - Fruxelot

我更新了我的回答，还有示例链接。请查看Fiddle的rev. 3。 - lorenzo-s

是的 - 第一个和最后一个项目没问题 - 但是当你滚动时，项目会“落后”于标题。这就是我的问题哈哈！我只是改变了标题和页脚的不透明度，以显示当页面滚动时，项目会落后于元素。 - Fruxelot

@Fruxelot 好的，我可能没有理解好。我认为你正在寻找这个。所以，你的**第一个例子** 对我来说已经很好了。内容会自动滚动，不会出现在页眉或页脚下面... 我错过了什么吗？ - lorenzo-s

哇...我一定是太蠢了 - 它起作用了...哈哈。虽然谢谢你的帮助！ - Fruxelot