I have some simple CSS and I don't know why it isn't working. It uses percentages and I have labeled both and I still don't understand why it works. Here's the code

.BoxHeight {
height: 100%;
}

#Box {
  margin-top: 0%;
  margin-left: 3%;
  width: 90%;
  height: 80%;
  background-color: red;
  }

<div class="BoxHeight">
<div id="Box"></div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You need to add height to the body.

html, body {
    height: 100%; 
    width: 100%; 
}

CodePudding user response：

Do "BoxHeight" have a parent ? Be cause if no, or the parent is a default body, it will have a height of 0. You must give a diffined Height, using px for exemple, and the "Box" will have 80% of this height.