如何使iframe内表格适配其高度，无需滚动查看全部内容？

咱们一步步来搞定这个表格适配的问题，核心是消除默认样式的干扰，同时让表格和iframe的高度规则统一：

1. 先清除iframe内部页面的默认边距 #

浏览器默认会给html、body标签加margin和padding，这直接导致内容没法占满整个iframe。你得在顶部iframe的页面里加一段CSS重置：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 避免body自身出现滚动条 */
}

2. 让表格真正占满100%高度 #

你之前给表格加了height="100%"，但还得确保父元素（html、body）都有100%高度，同时给表格加CSS强制适配容器：

<table style="height: 100%; width: 100%; border-collapse: collapse;" border="0">
  <!-- 你的表格内容 -->
</table>

加border-collapse: collapse是为了避免表格边框额外占用高度，破坏适配效果。

3. 确保iframe本身的高度设置正确 #

在包含三个iframe的主页面里，给顶部iframe设置明确高度（可以是固定值或百分比），同时关掉不必要的滚动条：

<iframe src="你的顶部页面地址?sysusrid=xxx" style="height: 350px; width: 100%; border: none; overflow: hidden;" scrolling="no"></iframe>

如果想用百分比高度，得保证iframe的父元素（比如body、外层div）也设置了100%高度，不然百分比会失效。

4. 处理表格内容过多的特殊情况 #

如果表格内容本身高度超过了iframe高度，强行挤压会让内容变形，这时可以二选一：

• 用JS动态计算表格高度，再同步设置iframe的高度（保证内容完整显示）
• 给表格tbody加滚动，表头固定：

table {
  height: 100%;
  display: flex;
  flex-direction: column;
}
thead {
  flex-shrink: 0; /* 表头不压缩 */
}
tbody {
  flex-grow: 1; /* tbody占满剩余高度 */
  overflow-y: auto; /* 内容超出时滚动 */
}

这样既保证表格占满iframe高度，又不会让内容变形。

完整的顶部iframe页面示例 #

把上面的调整整合起来，你的顶部页面代码可以改成这样：

<?php $sysusrid = $_GET['sysusrid']; ?>
<html>
<head>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    table {
      height: 100%;
      width: 100%;
      border-collapse: collapse;
    }
    /* 可选：如果需要表头固定，取消下面注释 */
    /*
    table {
      display: flex;
      flex-direction: column;
    }
    thead {
      flex-shrink: 0;
    }
    tbody {
      flex-grow: 1;
      overflow-y: auto;
    }
    */
  </style>
</head>
<body>
  <table border="0">
    <!-- 你的表格内容 -->
  </table>
</body>
</html>

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