Height in percent does not work?

Question

I'm wondering why the height in percentage is not working in this code:

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

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

Im using this div element as a vertical ruler/separator.

Here's my code: http://jsfiddle.net/jKGUC/5/

Please help. Thanks in advance.

Answer 1

The height: 100%; style sets the height according to the height of the parent container. If the parent is the body, you also need to specify the height on those elements.

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