HTML無法更改Div的高度

Question

因此，我正在製作一個tic tac toe遊戲，但由於某些原因，我的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

添加一些高度到div與board的ID。

添加到您的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和身體都需要有高度的100％，那麼你的外部容器（假設它是在這裏#board）需要指定分鐘 - 高度填充文檔，併成爲塊的顯示類型。