如何实现仅滚动iframe内容而不滚动整个网页（尽量不用JS）

你要的「滚动内容区时其余部分固定、iframe高度自动适配内容+25px底部内边距、无多余留白」效果完全可以脱离JS实现，核心是抛弃原有写死固定高度+绝对定位的布局逻辑，用视口约束+弹性布局+内容适配高度属性实现。

实现逻辑 #

• 最外层用固定定位容器撑满整个视口，容器本身不产生页面级滚动，从根源上避免滚动时导航、顶部区域移位。
• 内容iframe移除写死的固定高度，改用height: fit-content自动匹配内部加载页面的实际内容高度，彻底解决固定高度带来的大面积留白问题。
• 滚动属性绑定在内容iframe的父级容器上，而非iframe本身或页面根节点，保证滚动行为只作用于内容区域。
• 所有内容页给body加25px底部内边距，满足舒适阅读的间距要求。

可直接复用的代码 #

主页面（放置两个iframe的父页面）代码 #

替换你原有写死样式的iframe，整体布局代码如下：

<!-- 外层固定容器，撑满视口，无页面级滚动 -->
<div style="position: fixed; inset: 0; margin: 0; padding: 0; display: flex; flex-direction: column;">
  <!-- 顶部固定区域，高度匹配你原有布局的215px -->
  <div style="height: 215px; flex-shrink: 0;">
    <!-- 原有顶部内容放在此处 -->
  </div>
  <div style="flex: 1; display: flex; overflow: hidden;">
    <!-- 左侧导航iframe，宽度匹配你原有布局的205px -->
    <iframe name="nav" src="nav.html" style="width: 205px; flex-shrink: 0; border: none;" title="Navigation Pane"></iframe>
    <!-- 内容区滚动容器，仅此处产生滚动条 -->
    <div style="flex: 1; overflow-y: auto;">
      <!-- 内容iframe，移除原有固定高度、绝对定位、滚动相关属性 -->
      <iframe name="content" src="content.html" style="width: 100%; height: fit-content; border: none; display: block;" title="Content Pane"></iframe>
    </div>
  </div>
</div>

所有内容页（iframe中加载的页面）全局样式 #

在每个内容页的样式中加入以下规则，实现25px底部舒适内边距：

body {
  margin: 0;
  padding-bottom: 25px;
}

注意事项 #

• 该方案完全不依赖JavaScript，适配所有现代浏览器。
• 方案适合同源站点使用，也就是所有iframe加载的页面和主页面属于同一域名，自主开发整站的场景完全满足要求，不存在跨域导致的高度识别失败问题。
• 原有iframe上写死的height:2500px、position:absolute、top:215px、left:205px、scrolling:yes、overflow-y:scroll属性需要全部移除，避免样式冲突。

内容的提问来源于stack exchange，提问作者Benjamin Dennison