如何让React首页组件占满整个viewport，消除页面多余滚动条

导致问题的核心原因有两个：

1. 浏览器默认给html、body设置了margin/padding，且默认box-sizing为content-box，元素的padding、border会额外增加元素总宽度，导致宽度超出视口出现横向滚动条
2. 导航栏和你设置了100vh的section累加高度超过视口高度，导致出现纵向滚动条

解决方案 #

第一步：全局样式重置

在全局入口css（通常是index.css）中添加以下代码清除默认样式：

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

html, body {
  overflow-x: hidden;
  height: 100%;
}

第二步：调整首页布局适配视口高度

推荐用flex弹性布局实现自适应高度，无需手动计算导航栏高度，适配性更强：
首先修改MainView组件的外层结构，包裹一层flex容器：

import NavBar from "./NavBar";
import SocialMedia from "../socialmedia/SocialMedia";
import classes from './MainView.module.css';
import background from '../../img/pic2.jpg';

function MainView() {
    const style = {
        backgroundImage: `linear-gradient( rgba(8, 8, 37, 0.85), rgba(0, 15, 80, 0.675)), url("${background}")`
    };

    return (
        <div className={classes.main__container}>
            <NavBar />
            <section style={style} className={classes.top}>
                <div className={classes.text__div}>
                    <p className={classes.profile__name}>My Name</p>
                    <p className={classes.profile__dev}>Full Stack Web Developer</p>
                </div>
                <SocialMedia />
            </section>
        </div>
    )
}

export default MainView;

然后修改MainView.module.css的对应样式：

@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Trispace&display=swap');

.main__container {
  display: flex;
  flex-direction: column;
  /* 100dvh适配移动端浏览器地址栏占用高度的场景，不需要兼容移动端可以换成100vh */
  height: 100dvh;
  width: 100%;
}

.top {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    /* 删掉原有100vh高度配置，用flex:1自动占满剩余高度 */
    flex: 1;
    font-family: 'Montserrat', sans-serif;
    color: white;
    text-align: center;
}

.text__div {
    text-align: center;
}

.profile__name {
    padding-top: 15rem;
    font-size: 4rem;
    margin-bottom: 2rem;
    margin-top: 0rem;
}

.profile__dev {
    font-size: 2rem;
}

如果你的导航栏是固定高度，也可以直接修改.top类的高度属性，无需修改组件结构：

.top {
  /* 把80px替换成你实际导航栏的高度即可 */
  height: calc(100vh - 80px);
}

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