iframe布局下滚动条显示不全，底部内容无法展示求助

问题描述 #

页面滚动条无法完整显示，导致底部内容无法正常展示。页面采用iframe布局，深灰色区域与白色区域为不同iframe，用于跳转「Where to find us」页面。这是首次开发较复杂网站，可能存在其他配置问题。

相关代码 #

CSS 代码 #

html {
  overflow-y: hidden;
  height: 100%;
}

html,
body,
iframe {
  margin: 0px;
  padding: 0px;
  border: none;
}

.nav-bar {
  display: block;
  width: 100%;
  border: none;
  height: 107px;
}

.page {
  position: absolute;
  height: 100%;
  width: 100%;
  margin-bottom: 700px;
}

.page iframe {
  width: 100%;
  height: 100%;
}

HTML 代码 #

<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="CSS/index.css">
</head>

<body>
  <iframe class="nav-bar" src="nav-bar.html" frameborder="0"></iframe>
  <div class="page">
    <iframe class="left" src="main.html" name="main" scrolling="si" frameborder="0"></iframe>
  </div>
</body>

问题原因与修复方案 #

• 核心问题1：html标签禁用垂直滚动
  给html设置的overflow-y: hidden会直接隐藏整个页面的垂直滚动条，内容超出视口后无法滚动查看。
  修复：移除html的overflow-y: hidden属性，或改为overflow-y: auto。

• 核心问题2：.page容器高度与定位错误
  .page使用position: absolute且height: 100%，但页面顶部还有107px高的导航iframe，导致.page的高度占满整个视口，加上导航高度后底部内容被挤出视口。
  修复：给.page添加top: 107px让它从导航下方开始布局，同时将height: 100%改为height: calc(100% - 107px)，确保容器高度为视口减去导航高度。

• iframe滚动属性无效
  左侧iframe设置的scrolling="si"是无效值，有效值为auto/yes/no。若需要iframe内部可滚动，改为scrolling="auto"或直接移除该属性（默认值为auto）。

• 冗余属性干扰布局
  .page的margin-bottom: 700px无实际作用，还可能导致布局混乱，建议移除。

修复后代码示例 #

修复后的CSS

html {
  height: 100%;
}

html,
body,
iframe {
  margin: 0px;
  padding: 0px;
  border: none;
}

.nav-bar {
  display: block;
  width: 100%;
  border: none;
  height: 107px;
}

.page {
  position: absolute;
  top: 107px;
  height: calc(100% - 107px);
  width: 100%;
}

.page iframe {
  width: 100%;
  height: 100%;
}

修复后的HTML

<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="CSS/index.css">
</head>

<body>
  <iframe class="nav-bar" src="nav-bar.html" frameborder="0"></iframe>
  <div class="page">
    <iframe class="left" src="main.html" name="main" frameborder="0"></iframe>
  </div>
</body>

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