React如何解决页脚下方留白、主div未占满整个视口的问题

解决方案 #

1. 全局样式重置

在项目全局样式文件（通常为src/index.css）中添加以下代码，清除浏览器默认边距并设置根节点全屏高度：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  height: 100%;
}

• box-sizing: border-box 可避免元素内边距、边框撑大元素尺寸，导致出现不必要的滚动条或溢出问题
• #root 是React应用默认的挂载节点，设置高度100%后其子元素才能继承到全屏高度

2. 修正组件属性写法

React中定义元素类名需要使用驼峰格式className，你现有代码中的小写classname为错误写法，会导致样式无法生效，修改对应代码即可：

// 修改前
<div classname="Launchpage-Body">
// 修改后
<div className="Launchpage-Body">

3. 调整页面容器样式

如果你不需要使用fixed定位（fixed定位会让元素脱离正常文档流，后续插入元素会被遮挡），可以调整Launchpage-Body的样式为：

.Launchpage-Body{
    background-color: black;
    width: 100%;
    /* 两种写法二选一即可 */
    min-height: 100vh; /* 直接匹配视口高度，不需要依赖父元素高度 */
    /* 或者 min-height: 100%; 前提是所有父元素都已经设置了高度100% */
}

4. 适配Header+Footer的布局结构

如果你的App全局布局是「Header + 内容区 + Footer」的结构，可以给App根容器设置flex布局，让内容区自动撑满剩余高度，彻底避免底部留白：
首先给App.js的根元素添加类名：

<div className="app-container">
  <Header />
  <div className="main-content">
    {/* 路由对应的页面组件渲染在这里 */}
  </div>
  <Footer />
</div>

再添加对应的全局样式：

.app-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-content {
  flex: 1;
}

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