React项目配置html、body、#root高度100%后无法滚动及body消失的修复方法

你遇到的无法滚动、移除高度配置就页面消失的问题，核心是两个布局逻辑错位：

• 给html、body、#root统一设置height:100%时，相当于把三层容器的高度硬锁在当前视口的固定高度，不会随内部内容增长自动撑开。超出锁死高度的内容会被直接裁切，自然无法触发页面滚动。
• footer上写的flex-shrink: 0、position: relative; bottom: 0本来是为实现“内容少的时候吸底、内容多的时候跟随文档流”的sticky footer逻辑准备的，但你没有给上层容器开启对应的flex纵向布局，等于样式写了没生效，内容排布完全错位。
• 移除100%高度配置后页面消失，本质是之前的容器高度全靠硬设的100%撑着，没有给容器设置基于内容的自然高度规则，移除后高度直接坍缩到0，视觉上就像body消失了。

1. 调整全局高度规则，替换锁死高度的写法 #

把原来的全局样式改成下面的配置，既保留基础的满视口高度适配，又不会锁死容器高度：

html,
body {
  height: 100%;
  margin: 0; /* 清除浏览器默认给body的边距，避免高度计算偏差 */
}
#root {
  min-height: 100%;
  /* 开启纵向flex布局，为吸底footer做基础支撑 */
  display: flex;
  flex-direction: column;
}

这里的核心区别是把#root的height:100%换成了min-height:100%：前者是固定锁死视口高度，内容多了直接裁切；后者是至少占满整个视口高度，内容变多的时候容器会自动跟着撑高，触发正常的浏览器滚动逻辑。

2. 精简footer的冗余样式 #

把原来的footer样式里没用的定位属性全部删掉，只保留flex布局需要的规则：

footer {
  font-family: "Lucida Handwriting";
  text-align: center;
  background: #a1793a;
  width: 100%;
  flex-shrink: 0;
  margin-top: 12px;
}

删除原配置里的position: relative、bottom: 0、left: 0，这几个属性在flex布局下没有任何实际作用。

3. 给主内容区加弹性撑开规则 #

把所有放在footer上方的页面内容，统一放到一个独立的主内容容器里，给这个容器加flex: 1属性：

• 当页面内容很少时，这个容器会自动占满#root内除了footer的剩余空间，把footer顶到视口底部，实现正常的吸底效果
• 当页面内容很多时，这个容器会跟着内容自然撑高，整个#root的高度会超过100%视口高度，自动触发正常的页面滚动，不会出现内容被卡在footer位置裁掉的问题。

• 如果之前是为了接入页面动画需要全屏视口容器，单独给动画所在的区块设置min-height: 100vh就可以，不要把#root的高度锁死，避免和页面滚动逻辑冲突。
• 不要依赖position: relative; bottom: 0实现吸底效果，这种写法只会让元素在自身文档流的位置向上偏移，根本不会真正贴在页面底部，还会打乱正常的文档流高度计算。

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