React Sandbox如何设置页面全屏铺满（消除侧边空白）

你遇到的两侧空白是浏览器默认给html和body元素添加了margin、padding导致的，只给容器设置100%宽高不够，得先把这些默认样式重置掉，再让容器彻底占满视口。

给你两个可行的解决方案：

方案一：全局样式重置+容器占满视口 #

在你的styles.css里添加以下代码：

/* 清除浏览器默认的内外边距 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 给根容器（比如App组件的外层元素）设置样式 */
.app-root {
  width: 100%;
  min-height: 100vh; /* 用vh单位直接占满当前视口高度，比100%更适配动态场景 */
  background-color: red;
}

记得给你的根组件（比如App）加上对应的className="app-root"。

方案二：直接给body设置背景（更简洁） #

如果整个页面都需要红色背景，也可以直接给body设置样式：

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background-color: red;
}

这样不用给容器额外设置样式，整个页面背景就会是红色，也不会有侧边空白。

之前设置100%没用的原因：一是父元素（html、body）默认的边距没清除，二是如果父元素高度没被撑起来，子元素的100%高度也无法生效。100vh是直接基于当前视口高度计算，适配性更强。

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