Menu
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. :)
923
If the content is fluid, height will stretch indefinitely to fit it. If set relatively, element's height will be relative to the height of the parent — if set. If the height of parent is not set — the height of the element will stay auto (like: 50% from auto is auto).
To override a set height in a CSS element, you can simply put this in the inherited element (either in a style block or inline): height: auto; This will override the set value inherited, without statically setting a new one. Save this answer.
Height = 0 because the parent of the elements have 0 height, so make sure your parent, which is body here have 100% height or else. Save this answer.
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%;
}
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
