爲什麼是當我改變此位CSS樣式的高度，一個div從PX到％它不工作？

Question

在this code（使用jQuery的），在html

#canvas { height: 500px; background: white; } 

以下行設置在畫布上繪製上的高度。但是，如果將高度更改爲如下百分比值：

#canvas { height: 20%; background: white; } 

畫布根本不顯示。這是爲什麼？謝謝閱讀。

Answer 1

如果百分比不起作用，那麼它只是意味着父母元素沒有高度。在這種情況下，你想給兩個html和body的高度。

html, body { height: 100%; } 

上body設置它只是將無法工作，因爲它反過來又高度依賴於html之一。

另請參閱您的演示this revision。

Answer 2

如果您將父項設置爲特定值，則可以使用百分比（％）。

參見my revision。

在那裏，我把一個300像素高的div父母。畫布有100％。

Answer 3

我想這是因爲你的畫布'包含div沒有高度價值。

Answer 4

父容器需要有一個高度 - 否則瀏覽器不知道要從中計算高度。它在想...... 20％的是什麼？對我們有意義但不適用於它。