Angular、React设置html与body高度100%时页面溢出问题问询

差异原因 #

这个现象的核心是W3C对根元素的外边距合并特殊规则和SPA框架的DOM结构差异共同导致的：

1. 外边距合并的基础规则：普通同级/父子块级元素之间如果没有border、padding阻隔，也没有创建BFC（块级格式化上下文），相邻的上下外边距会发生合并。
2. 原生HTML场景：<h1>是<body>的直接子元素，<html>和<body>作为根相关元素，其外边距合并后的最终结果会作用于视口顶部，不会将<body>元素向下推，因此不会出现溢出。
3. Angular/React场景：<body>的直接子元素是框架插入的普通根宿主节点（Angular为<app-root>、React为<div id="root">），这类普通元素没有根元素的特殊合并规则。如果没有特殊配置，内部<h1>的上外边距会和根宿主的上外边距合并，直接将根宿主向下推对应高度，超出height: 100%的视口范围，最终出现溢出。

适配方案 #

在Angular中可以通过以下几种方法实现和原生HTML一致的表现，按优先级推荐：

• 方案1：给根宿主创建无副作用BFC
  在全局样式文件styles.css中添加规则：

  app-root {
    display: flow-root;
  }
  

  display: flow-root是专门用来创建BFC的属性，不会改变原有布局效果，直接阻隔内外边距合并，是最优解。
• 方案2：添加阻隔边距合并的样式
  给根宿主添加上内边距或上边框：

  app-root {
    /* 二选一即可 */
    padding-top: 0.1px;
    border-top: 1px solid transparent;
  }
  

• 方案3：全局重置默认边距
  全局清除所有元素的默认外边距，从根源避免边距合并问题：

  * {
    margin: 0;
  }
  

  需要间距时手动声明对应样式即可，也是多数项目的通用规范。

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