内容在具有固定页眉/页脚的移动页面上滚动

Question

您好我正在构建一个移动网页，其中我的内容只会滚动，我的页脚和标题位置：固定 - 我可以制作内容，使其不会在页眉或页脚下滚动，以便它只滚动在它自己的div。

我想要这样做的原因是我的页眉和页脚会有一些不透明度，如果内容滚动下来，那就不好看了。

这是一个jsfiddle，我只是向你展示了滚动的例子

http://jsfiddle.net/VNVqs/

Answer 1

你在这里：

  

<强> http://jsfiddle.net/VNVqs/3/

我刚将position: absolute删除到滚动部分（包装和滚动内容），并在包装​​中添加了一些padding为了让第一个和最后一个项目不在页眉和页脚之下。

基本上，只需在页眉和页脚上使用position: fixed 即可完成此操作，并让页面的其余部分滚动为普通页面，不在特定的固定高度元素上使用overflow: auto。这样做，唯一的问题是你的内容的第一行总是在固定定位的标题下（和页脚下的最后一行），但你可以通过在内容包装上应用一些填充来解决这个问题。标题（和页脚）高度。你明白了吗？