Question

所以我正在进行一个tic tac toe游戏，但出于某种原因，我的divs不会改变他们的身高。

＆＃13;

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

＆＃13;

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

＆＃13;

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

编辑：这可能不是必要但我感觉不好，如果你帮帮忙，谢谢你抽出时间。：）

Answer 1

那是因为你没有板子的高度，而且差不多0的30％是...... 0。

为ID添加一些身高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%;
}

Answer 2

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

要使用百分比你的html和body都需要高度100％然后你的外容器（假设它是#board here）需要指定min-height来填充文档，并且是块的显示类型。

HTML无法改变Div的高度

2 个答案: