Set the height to 100% of the browser viewing window when the container is larger than the viewing area?

Question

I am working on a website, and I need to set the height and width of the div to cover the entire browser viewing area, like many modern websites. However, I cannot just set its height to 100%, because its parent is a different div, the height of which should be greater than the browser window. Is there any other way to do this?

Below is an example code similar to my site.

HTML

<div class="entireThing">
  <div class="contentBox">
  </div>
  <div class="contentBox">
  </div>
</div>

CSS

.entireThing {
    height: 8000px;
    width: 100%;
}
.contentBox {
    height: 100%; /*This works only if parent is same size as window*/
}

Answer 1

5.1.2. Percentage lengths in viewport: vw, vh, vmin, vmax units

. , .

. 100vh.

.contentBox {
    height: 100vh;
}

---

calc(), / 10px:

.contentBox {
    height: calc(100vh - 20px); /* Subtract the 10px top/bottom margins */
    margin: 10px;
    color: white;
    background-color: #222;
}

.. , , .