Make page in React take up the full screen

Question

I am working on a website using React and Material UI library and I am done with the basic layout for the home page. However, right now it is a bit awkward since the home page does not take up the full screen, leaving some empty white space at the bottom. Does anyone know how to style my home page to make it take up the full screen? Many thanks in advance

Here is the code for my home page, Home.js

 import React, { useState } from 'react'; import '../styling/Home.css'; import { constants } from '../styling/Constants'; import Header from '../components/Header'; import Footer from '../components/Footer'; import Searchbar from '../components/Searchbar'; import { StyledButton } from '../components/Button'; import BigCard from '../components/BigCard'; import SmallCard from '../components/SmallCard'; import Grid from '@material-ui/core/Grid'; import Paper from '@material-ui/core/Paper'; import { Container } from '@material-ui/core'; function Home() { const style = { 'text-align': 'center' } const smallDivStyle = { 'display': 'flex', 'margin': '12px' } return ( <div style={style}> <Searchbar /> {/* item xs, md changes width length of paper */} <Container> <Grid container> <Grid item xs={12}> <BigCard></BigCard> </Grid> </Grid> </Container> <br></br> <Container> <Grid container> <Grid item md={4}> <SmallCard></SmallCard> </Grid> <Grid item md={4}> <SmallCard></SmallCard> </Grid> <Grid item md={4}> <SmallCard></SmallCard> </Grid> </Grid> </Container> </div> ) } export default Home;

Answer 1

Whichever element is your background, target with the the css:

height: 100vh;

Which makes the element the same height as your screen. If you have a navbar at the top then you can do this:

height: calc(100vh - <height of navbar>px);

You can also use min-height and max-height CSS selectors to ensure that it never shrinks below a certain height (eg for mobile displays)

Answer 2

Your container needs maxWidth={false} on it. The top most container.