HTML 无法更改 Div 的高度

所以我正在开发井字游戏，但由于某种原因我的 div 不会改变它们的高度。

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>

div 的宽度变化得很好，但至于高度（应该是每个屏幕的 30%）实际上是线条。

编辑：这可能没有必要，但我感觉很糟糕，如果您确实提供帮助，谢谢您花时间。 :)

那是因为你没有到棋盘的高度，而几乎 0 的 30% 是……0。

为 id 为的 div 添加一些高度board.

将其添加到您的 CSS 中：

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