How to remove the whitespace below my footer in React-CodePudding

I am currently building an application using Reactjs. The code for the page is given below

import React, { Component } from 'react';
import "./launchpage.css" ;
export default class LaunchPage extends Component {
    render() {
        return (
            <div classname="Launchpage-Body">
                <h3>Launch Page</h3>    
            </div>
        )
    }
}

The CSS for the above code component is given below

.Launchpage-Body{
    background-color: black;
    position: fixed;
    width: 100%;
    height: 100%;
}

Screenshot of page on Chrome

The div element with classname "Launchpage-Body" does not cover the entire viewport and the same problem persists with other pages unless my content in page fills the entire viewport. Below image shows my problem through inspect element on chrome.

On checking with Inspect Element

The App.js file contains the routes for Header, Footer and other pages in my application but it doesnt have its own CSS.

How do I make the main div element cover the entire page?

CodePudding user response：

set min-height property to 100vh to the class you want to cover complete page

min-height: 100vh;

or use absolute positioning to set footer at bottom of page

position: absolute;
bottom: 0;

CodePudding user response：

use vh and vw properties in your case

.set-height{
    min-height: 100vh;
    min-width: 100vw;
}

the class would do the trick