答案：使用 position: fixed 固定导航栏，通过 margin-top 为内容区预留空间，并设置 overflow-y: auto 实现内容滚动。示例包含头部固定、内容区域占满视口并独立滚动，避免遮挡与双滚动条问题，同时考虑响应式适配与兼容性方案。
要在网页中实现顶部固定导航栏并让下方内容可滚动，关键是使用 position: fixed 固定顶部区域，并通过 overflow 控制内容区域的滚动行为。下面详细介绍具体实现方式。
1. 使用 position: fixed 固定顶部元素
将导航栏或头部设置为固定定位，使其在页面滚动时始终停留在视口顶部。
例如：
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
color: white;
z-index: 1000;
}
说明： fixed 定位会让元素脱离文档流，固定在浏览器窗口的某个位置。设置 top: 0 可使元素贴住顶部，z-index 确保它显示在其他内容之上。
立即学习“前端免费学习笔记（深入）”；
2. 为主内容区域预留空间
由于头部被 fixed 后不再占据文档流空间，下方内容会“上移”，可能被遮挡。需要给主内容添加 margin-top 或使用 padding-top 来腾出空间。
示例：
.main-content {
margin-top: 60px; /* 与头部高度一致 */
height: 100vh; /* 占满视口高度 */
overflow-y: auto; /* 内容超出时允许垂直滚动 */
}
注意： 如果不设置外边距，内容会从页面最顶端开始，导致前几行文字被头部覆盖。
3. 控制内容滚动范围
如果希望只有中间内容区域滚动，而头部固定不动，可以将整个页面结构分为两个部分：固定头部和可滚动主体。
HTML 结构建议：
<div class="header">导航栏</div> <div class="main-content"> <p>这里是长内容...</p> </div>
CSS 中关键点是让 .main-content 自身处理滚动，而不是让整个页面滚动。
滚动控制技巧：
- 设置 height: 100vh 让内容区占满视口
- 使用 overflow-y: auto 实现内部滚动
- 避免 body 出现双层滚动条，可设置 body { margin: 0; overflow: hidden; }
4. 响应式与兼容性考虑
在移动端或小屏幕上，确保 fixed 元素依然表现正常。
建议补充：
@media (max-height: 500px) {
.header {
height: 50px;
}
.main-content {
margin-top: 50px;
}
}
某些旧版移动浏览器对 fixed 支持不佳，可通过 JavaScript 检测或使用 position: sticky 作为替代方案（适用于仅需头部随页面滚动到顶后固定的情况）。
基本上就这些。固定顶部加滚动内容的核心在于定位与空间补偿的配合，只要处理好 margin 和 overflow，就能实现流畅的视觉效果。
