Css 使用固定页眉/页脚在移动页面上滚动内容

你好，我正在建立一个移动网页，其中我的内容只会滚动，我的页脚和页眉是位置：固定的-我可以使内容不在页眉或页脚下滚动，以便它只在自己的div中滚动吗

我想这样做的原因是，我的页眉和页脚会有一些不透明，如果内容被滚动到下面，它只是看起来不好

下面是我制作的一个JSFIDLE，它只是向您展示了这个卷轴的示例

给你：

我刚刚删除了滚动部分（包装和滚动内容）的

position:absolute

，并在包装中添加了一些

padding

，以使第一个和最后一个项目不在页眉和页脚下

---

基本上，技巧是通过仅在页眉和页脚上使用

position:fixed

，并让页面的其余部分像普通页面一样滚动，而不在特定的固定高度元素上使用

overflow:auto

。这样做，唯一的问题是内容的第一行将始终位于固定位置的页眉下（最后一行位于页脚下），但您可以通过在内容包装上应用一些填充，以及页眉（和页脚）高度来解决这一问题。你明白了吗？

谢谢，但内容仍然在标题和页脚下-也许我在解释问题时有点含糊不清。我给页眉和页脚增加了一些不透明度。我只是不希望任何内容能够在页眉或页脚下滚动-有可能吗？我更新了我的答案，还有示例链接。看小提琴的rev。3.是的-第一个和最后一个项目都是可以的-但是当你滚动时，项目会在标题后面。那是我的问题哈哈！我只是更改了页眉和页脚的不透明度，以显示当页面滚动时，项目会在元素后面。@Fruxelot Ok，所以我不太理解。我想你会一直在寻找这个。所以，你的建议在我看来已经很好了。内容会自动滚动，不在页眉或页脚下。。。我错过了什么？哇。。。我一定很愚蠢-这很有效。。。哈哈。谢谢你的帮助！您应该删除所有绝对位置&为使用overflow auto滚动内容或包装提供固定高度。并删除页眉和页脚的固定位置。选中此项：