Why is in when I change the height on this bit of CSS styling for a div from px to % it doesn't work?

Question

In this code (that uses jQuery), the following line in the html

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

sets the height on the canvas to draw on. But if you change the height to a percentage value like this:

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

the canvas doesn't display at all. Why is that? Thanks for reading.

Answer 1

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

See my revision.

There, I put a div parent with 300px of height. The canvas have 100% of this.

Answer 2

I imagine it's because your canvas' containing div has no height value.

Answer 3

If the percentage doesn't work, then it simply means that the parent element doesn't have a height. In this case, you'd like to give both html and body a height.

html, body { height: 100%; }

Setting it on body only won't work since its height in turn depends on the html one.

See also this revision of your demo.

Answer 4

The parent container needs to have a height - else the browser doesn't know what to calculate the height from. It's thinking...20% of what? Makes sense to us but not to it.