How to fill the entire page?

August 8, 2023

I am trying to make the .left and .right fill the entire height of the screen. I need the download button to be on the lower left side, and the orange fill of .right to fill the entire right side of the screen.
enter image description here

[enter

body {
  background-color: var(--black);
  color: var(--bs-white);
  font-family: 'Libre Franklin', sans-serif;
}



/* Button Hover - Download CV */
.btn-white:hover {
  background-color: var(--accent-hover);
  color: var(--white);
}



/* Selfie */
.selfie {
  max-width: 200px;
}

/* My Links */


.button {
  text-decoration: none;
  color: var(--white);
}

.ealinks:hover {
  background-color: var(--accent-hover);
  color: var(--primary);
}

<body class="container-fluid px-0">

<div class="row">
  
    <!-- #region Left -->
  
    <!-- Intro -->
    <div class="left col-xl-6 col-lg-12">
      <section class="container pt-5 mx-5">
  
        <div class="row f-font-main">
          <div>
             <text class="align-top fs-3">Hi, I'm </text> <text class="display-1 ps-3 c-text-secondary">Philip</text>
          </div>
        </div>
  
          <!-- Caption -->
      <div class="col-xl-8 col-8 pt-5">
        <p class="fs-3 c-text-primary">Frontend Developer explorer, delving into the world of code and venturing into the realms of responsive design.</p>
      </div>
      </section>
      <!-- Download CV -->
      <section class="container py-5 mx-5">
        <a href=".//files/CV.pdf">
          <button type="button" class="btn c-bg-white btn-white fs-5 c-text-accent rounded-5 px-4 py-3 f-font-body">Download CV <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
          </svg></button>
        </a>
      </section>
    </div>
  
    <!-- #endregion Left -->
  
  
  <!-- #region Right -->
  
  <!-- Image -->
  
  <div class="right c-bg-primary-opacity my-0 col-xl-6 col-lg-12">
    <section class="container d-flex justify-content-center">
      <img src="./images/selfie.png" alt="" class="selfie img-fluid justify-content-end">
    </section>
    <!-- Links -->
    <section class="container mb-4 d-flex justify-content-end">
        <div class="d-flex justify-content-end">
          <div class="d-flex flex-column">
            <a class="button ealinks py-3" href="#"><span class="c-bg-accent py-2 px-2 rounded-3">See my Digital Doodles</span></a>
            <a class="button ealinks py-3" aria-current="page" href="#"><span class="c-bg-accent py-2 px-2 rounded-3">Learn More About Me!</span></a>
            <a class="button ealinks py-3" href="#"><span class="c-bg-accent py-2 px-2 rounded-3">Let's Get in Touch!</span></a>
          </div>
        </div>
      </div>
    </section>
  </div>
  
  <!-- #endregion Right -->
  
</div>

image description here](https://i.stack.imgur.com/3lb6L.png)

<body class="container-fluid px-0">

<div class="row">
  
    <!-- #region Left -->
  
    <!-- Intro -->
    <div class="left col-xl-6 col-lg-12">
      <section class="container pt-5 mx-5">
  
        <div class="row f-font-main">
          <div>
             <text class="align-top fs-3">Hi, I'm </text> <text class="display-1 ps-3 c-text-secondary">Philip</text>
          </div>
        </div>
  
          <!-- Caption -->
      <div class="col-xl-8 col-8 pt-5">
        <p class="fs-3 c-text-primary">Frontend Developer explorer, delving into the world of code and venturing into the realms of responsive design.</p>
      </div>
      </section>
      <!-- Download CV -->
      <section class="container py-5 mx-5">
        <a href=".//files/CV.pdf">
          <button type="button" class="btn c-bg-white btn-white fs-5 c-text-accent rounded-5 px-4 py-3 f-font-body">Download CV <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-download" viewBox="0 0 16 16">
            <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
            <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
          </svg></button>
        </a>
      </section>
    </div>
  
    <!-- #endregion Left -->
  
  
  <!-- #region Right -->
  
  <!-- Image -->
  
  <div class="right c-bg-primary-opacity my-0 col-xl-6 col-lg-12">
    <section class="container d-flex justify-content-center">
      <img src="./images/selfie.png" alt="" class="selfie img-fluid justify-content-end">
    </section>
    <!-- Links -->
    <section class="container mb-4 d-flex justify-content-end">
        <div class="d-flex justify-content-end">
          <div class="d-flex flex-column">
            <a class="button ealinks py-3" href="#"><span class="c-bg-accent py-2 px-2 rounded-3">See my Digital Doodles</span></a>
            <a class="button ealinks py-3" aria-current="page" href="#"><span class="c-bg-accent py-2 px-2 rounded-3">Learn More About Me!</span></a>
            <a class="button ealinks py-3" href="#"><span class="c-bg-accent py-2 px-2 rounded-3">Let's Get in Touch!</span></a>
          </div>
        </div>
      </div>
    </section>
  </div>
  
  <!-- #endregion Right -->
  
</div>

>Solution :

Try this css code:

.left, .right {
  height: 100vh; /* This sets the height to 100% of the viewport */
}

.left {
  position: relative; /* This helps position the download button */
}

/* Position the download button on the lower left */
.container .btn {
  position: absolute;
  bottom: 10px; /* Adjust this value to place it where you want it vertically */
  left: 10px; /* Adjust this value to place it where you want it horizontally */
}

.right {
  background-color: orange; /* Change to the color you want */
}