7

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. :)

Xavier Horn
  • 103
  • 1
  • 1
  • 12

3 Answers3

6

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%;
}
Florin Pop
  • 5,105
  • 3
  • 25
  • 58
3
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.

Andrew Hoffman
  • 780
  • 6
  • 14
  • Nice, but if you dislike having an unnecessary vertical scrollbar, check out my take on this: https://stackoverflow.com/a/57122696/3881189 – FluorescentGreen5 Jul 20 '19 at 07:35
  • You shouldn’t have a scroll bar unless one of your 100% elements has top or bottom padding/margin/border. So you’d use this technique with a css reset in order to achieve full page with no scroll. – Andrew Hoffman Oct 08 '19 at 11:33
0

If you want to scale height according to viewport height, Use vh instead of %

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

By the way width: any%; can scale width freely because width html body (which is serving as a parent in this case)* is always 100%. But the height of the html body starts at 0 so height: any%; returns 0px.

*width:any%; scales relatively to its parent.

Ali hasan Galib
  • 43
  • 5
  • `width: x%` is not scaled relatively to the viewport, it's scaled relatively to its parent. `width: 100vw` is scaled relatively to the viewport. – Sigurd Mazanti Jun 10 '22 at 07:27