Why, when I change the height to this CSS style bit for div from px to%, does it not work?

Question

In this code (which uses jQuery), the next line in html

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

sets the height on the canvas for drawing. But if you change the height by a percentage as follows:

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

the canvas is not displayed at all. Why is this? Thanks for reading.

Answer 1

If the percentage does not work, it means that it simply means that the parent element has no height. In this case, you would like to give both html, and bodyheight.

html, body { height: 100%; }

Setting to bodyjust will not work, since its height in turn depends on html.

. .

Answer 2

, , div, .

Answer 3

You can use percentages (%) if you put a parent with a specific value.

See my version .

There, I put the parent div at 300px height. The canvas has 100% of this.

Answer 4

The parent container must have a height, otherwise the browser does not know what to calculate the height. He thinks ... 20% of what? It makes sense for us, but not for this.