css - 如何使我的组件仅填充整个视口，因此它们没有滚动选项

Question

我正在构建我的网站，需要帮助设计这个 React 组件的样式。这是主页，我有一个导航栏，然后是另一个包含信息和链接的部分。我希望能够让整个页面填满视口，这样用户就不会在屏幕右侧看到不必要的滚动条。我该如何做到这一点？这就是我所拥有的。

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 (
        <>
            <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>
        </>
    )
}

export default MainView;



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


.top {
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    width: 100%;
    height: 100vh;
    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;
}

标签： cssreactjsheightviewport