HTML Can't Change Height of Div

Question

So I'm working on a tic tac toe game but for some reason my divs won't change their height.

html {
  background-color:black;
  color:white;
  text-align:center;
}

.cell {
  border: 1px solid white;
  margin:1px;
  width:30%;height:30%;
}

<header>Tic Tac Toe</header>
<div id='board'>
  <div class='cell'></div>
  <div class='cell'></div>
  <div class='cell'></div>
</div>

The width of the divs is changing fine, but as for the height (which is supposed to be 30% of the screen each) are practically lines.

EDIT: This probably isn't necessary but I feel bad, if you do help out, thank you for taking your time. :)

Answer 1

That is because you don't have a height to the board and the 30% of almost 0 is... 0.

Add some height to the div with the id of board.

Add this to your css:

html {
  background-color:black;
  color:white;
  text-align:center;
}
#board{
 height:300px;
}
.cell {
  border: 1px solid white;
  margin:1px;
  width:30%;height:30%;
}

Answer 2

html, body { height: 100%; }
#board { display: block; margin: auto auto; min-height: 100%; }

To use percentages your html and body both need to be height 100% then your outer container (assuming it is #board here) needs to specify min-height to fill the document, and be display type of block.