Existe-t-il un moyen d'augmenter la hauteur de plus de 100%?

J'aimerais avoir un peu plus d'espace à la fin de l'écran mais j'ai déjà réglé ma hauteur à 100% pour la couleur de fond. Je veux ajouter plus d'espace avec la même couleur d'arrière-plan. Voici à quoi ça ressemble maintenant. J'ai défini la hauteur de div avec le nom de classe "project-main-box", qui contient chaque élément de la page, j'ai mis sa hauteur à 100%. J'ai essayé d'ajouter margin-bottom pour le div du conteneur principal, qui contient des éléments pour chaque boîte, mais cela n'ajoute qu'un espace blanc.

Mon code

ProjectMain.js

/* Projects Style */

.project-main-box {
  background-color: #ede7dd;
  padding: 0;
  margin: 0;
  height: 100%;

  // project header style
  .project-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    .header-wrapper {
      padding: 0;
      margin: 70px 0 0 0;
      .project-bullet {
        @include bullet;
        margin-bottom: 4px;
        height: 20px;
        width: 20px;
      }
      .project-name {
        display: inline-block;
        margin-bottom: 40px;
        margin-left: 5px;
        font-size: 50px;
        font-weight: bold;
      }
    }
  }

  // ProjectBox Component Style
  .main-container {
    @include project-box;
    margin-top: 80px;

    .proj-description {
      display: inline-block;
      width: 55%;
      position: relative;
      height: 100%;

      .description-header {
        background: blue;
        width: 10px;
        height: 50px;
        position: absolute;
        margin-top: 50px;
        h4 {
          margin-left: 35px;
          font-weight: bold;
          color: blue;
        }
      }

      p {
        position: absolute;
        margin: 130px 30px 0px 30px;
      }

      .stacks {
        position: absolute;
        margin: 220px 30px;
      }
    }

    .img-container {
      width: 45%;
      height: 100%;
      display: inline-block;
      overflow: hidden;
    }
  }
}

ProjectBox.js

export class ProjectBox extends Component {
  render() {
    return (
      <div className="main-container">
        <div className="proj-description">
          <div className="description-header">
            <h4>{this.props.title}</h4>
          </div>
          <p>{this.props.description}</p>
          <div className="stacks">
            <h6>Stacks Used: </h6>
            <ul>
              {this.props.stacks.map((stack) => {
                return <li key={stack}>{stack}</li>;
              })}
            </ul>
          </div>
        </div>
        <div className="img-container">
          <a href={this.props.url} target="_blank" rel="noopener noreferrer">
            <img
              src={this.props.img}
              height="100%"
              width="100%"
              alt="Img Not Found"
            ></img>
          </a>
        </div>
      </div>
    );
  }
}

App.scss p>

import React, { Component } from "react";
import ProjectBox from "./ProjectBox";
import Covid19 from "../../Images/covid19-proj.jpg";
import Spotify from "../../Images/spotify-logo.jpg";
import FormValidation from "../../Images/form-validation.png";

export class ProjectMain extends Component {
  render() {
    return (
      <div className="project-main-box">
        <div className="project-header">
          <div className="header-wrapper">
            <div className="project-bullet"></div>
            <div className="project-name">Projects</div>
            <h4>You can see the websites if you click them</h4>
          </div>
        </div>
        <ProjectBox
          title="Spotify"
          img={Spotify}
          url="https://spotify-search-app.herokuapp.com/"
          description="You can search artists and see their albums and tracks. It will direct you to Spotify website when you click the play button"
          stacks={[
            "ReactJS",
            "Bootstrap",
            "NodeJS / Express",
            "Spotify API",
            "Heroku",
          ]}
        />
        <ProjectBox
          title="CoronaTrace"
          img={Covid19}
          url="https://coronatrace-app.herokuapp.com/"
          description="A website that shows current COVID-19 cases across the states in the US with graphs and a table."
          stacks={[
            "ReactJS",
            "Bootstrap",
            "NodeJS / Express",
            "MongoDB Atlas",
            "Reacharts",
            "Heroku",
          ]}
        />
        <ProjectBox
          title="Form Validation"
          img={FormValidation}
          url="https://heuristic-bohr-3c4412.netlify.app/"
          description="A simple form validation app that checks username, email, and passwords."
          stacks={["Javascript", "CSS", "HTML"]}
        />
      </div>
    );
  }
}