HTML 不能改变 Div 的高度

Question

所以我正在开发一个井字游戏，但出于某种原因我的 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%)实际上是线。

编辑:这可能不是必需的，但我感觉很糟糕，如果你愿意帮忙，谢谢你花时间。 :)

Answer 1

那是因为你没有到板子的高度，几乎 0 的 30% 是...... 0。

使用 board 的 id 向 div 添加一些高度。

将此添加到您的 CSS:

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