Percentage height not working?

Question

I am wondering why the percentage height does not work in this code:

<div style="border-right:1px solid #000; height: 100%;"></div> .

But when I change the height to pixels, it works, but my problem is that the height is fixed in pixels.

Im uses this div element as a vertical ruler / divider.

Here is my code: http://jsfiddle.net/jKGUC/5/

Please, help. Thanks in advance.

Answer 1

Adding height: 100%; to table and to td around the div should do the trick. Here's the updated fiddle. http://jsfiddle.net/jKGUC/9/

Answer 2

Style height: 100%; sets the height according to the height of the parent container. If the parent is the body, you also need to specify a height for these elements.

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } 

Answer 3

If the parent is not a "pixel", its height for children cannot be set to "percentage"