Html 存在静态页眉/页脚时，将滚动条限制在内容区域

具有静态页眉和页脚的网页有以下示例： （查看此网页时，请单击右上角的红色“X”删除透明archive.org标题）

我的问题是，是否可以（轻松地）将滚动条限制在实际的（可滚动的内容）区域——换句话说，滚动条不应该延伸到静态的页眉和页脚上（就像现在这样）

显示相同内容：滚动条覆盖页眉和页脚的静态页眉和页脚的可滚动内容，但应限于内容框：

#content {
width: 1024px;
margin: 0 auto;
padding: 60px 0;
height:calc(100% - 120px);
}

以下是当前实施的一个示例：

html，正文{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
背景色：#ff00ff；
保证金：0px自动；
}
.包装纸{
宽度：100%；
身高：100%；
}
.集装箱{
宽度：1024px；
保证金：0px自动；
身高：100%；
}
标题{
宽度：1024px；
高度：60px；
背景：红色；
位置：固定；
排名：0；
}
#内容{
宽度：1024px；
保证金：0自动；
填充：60px0；
高度：计算（100%-120px）；
背景色：#fff；
}
页脚{
宽度：1024px；
高度：60px；
背景：红色；
位置：固定；
底部：0；
}

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

海伦

您可以使用：

溢出：自动在
#内容上
。
以下是css的修改版本，可帮助您解决当前问题：


html，正文{
身高：100%；
}
身体{
保证金：0；
填充：0；
背景色：#ff00ff；
}
.包装纸{
宽度：1024px；
身高：继承；
}
.集装箱{
保证金：0自动；
身高：继承；
}
标题{
高度：60px；
背景：红色；
}
#内容{
保证金：0自动；
填充：0；
高度：计算（100%-120px）；
背景色：#fff；
溢出：自动；
}
页脚{
高度：60px；
背景：红色；
}

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

你好

海伦

Hello David，我投票结束了这个问题，因为它不清楚，并且表明您没有努力解决问题。您应该创建一个问题，并在问题中包含您的代码，以获得好的答案。如果你想指向一个网站并说“我也想要这个”，你需要雇佣一个人。祝您好运。@David.P在您给定的网站链接中。您想知道用户滚动内容不会显示在透明标题旁边吗？谢谢。添加了一个JSFIDLE链接。此外，滚动条应该仅限于可滚动内容部分。非常感谢Nico修复我的问题并提供解决方案！我只是将包装宽度更改为100%，并在代码中添加注释，以了解每件事的作用。您是否可以填写CSS注释，这样我就可以了解您为什么做了不同的更改，以及为什么仅仅在内容div中添加“overflow:auto”是不够的？再次感谢您。有很多方法可以解决您提供的任务。您可以像以前一样使用
position:fixed
，或者使用
flexbox
等等。因此，我无法为您提供最佳实践。我选择这种方式是为了不太干扰您提供的环境。我建议你带上你的浏览器开发工具到处玩。比较一下你和我的解决方案。P.s
width:100%
将不需要，因为默认情况下块元素将填充其父项的
宽度。祝你好运