相同结构样式的子页面无法正常100%宽高渲染该如何修复？

• 第一步：统一全局基础样式规则
  所有页面（含首页、子页面）都添加全局样式重置，消除默认边距、统一盒模型、确保宽高继承链路完整：

/* 全局盒模型统一 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 根节点宽高显式声明，确保继承有效 */
html, body {
  width: 100%;
  height: 100%;
}

• 第二步：规范iframe标签样式
  所有嵌套的iframe标签显式设置宽高，消除默认行内元素间隙、边框：

iframe {
  /* 消除行内元素默认行高间隙 */
  display: block;
  width: 100%;
  height: 100%;
  /* 移除默认边框 */
  border: none;
  /* 内容溢出时按需滚动 */
  overflow: auto;
}

• 第三步：检查父容器与根容器高度规则

1. 包裹iframe的父容器必须显式设置height: 100%，不可仅用min-height声明，否则子级iframe的百分比高度无法继承
2. 子页面的内容根容器（如#app、.container等）需同步设置width: 100%; height: 100%，确保内容层可以撑满视口

• 第四步：排查异常冲突规则
  如果修改后仍有适配问题，逐一排查以下场景：
  • 是否有全局样式给body、根容器设置了固定宽高、最大/最小宽高限制
  • 是否存在浮动元素未清除导致父容器高度塌陷
  • 移动端场景下避免优先使用vh单位设置高度，部分浏览器计算vh会包含地址栏高度，导致适配偏差

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