React路由下如何让iframe占满剩余空间且无滚动？

问题核心是当前main元素设置了height:100%，这会让它的高度等于浏览器视口高度，再加上页面顶部的header，整体高度就会超出视口，导致滚动条出现。要让iframe占满扣除header后的剩余空间，只需调整页面的flex布局结构：

修改后的代码实现 #

CSS代码 #

/* 重置默认边距，让body成为垂直flex容器 */
body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止页面整体滚动 */
}

/* header保持原有高度，不占用额外flex空间 */
header {
  background-color: #f0f0f0;
}

/* main占据header之外的全部剩余空间 */
main {
  flex-grow: 1;
  width: 100%;
  margin: 0;
  padding: 0;
}

.row-container {
  display: flex;
  width: 100%;
  height: 100%; /* 继承main的高度 */
  flex-direction: column;
  background-color: blue;
  overflow: hidden;
}

.first-row {
  background-color: lime;
}

.second-row {
  flex-grow: 1;
  border: none;
  margin: 0;
  padding: 0;
}

HTML代码 #

<header>
  <h1>My header</h1>
</header>
<main>
  <div class="row-container">
    <div class="first-row">
      <p>Some text</p>
      <p>And some more text</p>
    </div>
    <iframe src="https://jsfiddle.net/about" class="second-row"></iframe>
  </div>
</main>

关键改动说明 #

1. 将body设置为flex容器，方向为垂直排列，这样它的子元素（header和main）会按垂直方向分配空间
2. 给main添加flex-grow:1，让它自动填充header占据后剩下的全部视口空间，不再用固定的height:100%
3. 给body添加overflow:hidden，确保页面整体不会出现滚动条
4. row-container继承main的高度，内部的iframe通过flex-grow:1填充first-row之外的剩余空间

这样设置后，iframe会完美填充扣除header和first-row后的所有剩余空间，页面不会出现不必要的滚动条。

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