Set an Element inside a div to 100% height

Question

i want to have an element inside a div set to height 100%. The element (an ul Element) must be set relative. The list items are set absolute but in reference to the parent element.

See the example: http://jsfiddle.net/mbecker/ee78G/2/

How to set the green ul Element to 100% height?

Thanks in advance!

Answer 1

I removed the height: auto !important on #main. Then, I was able to set height: 100% to #list.

I'm not sure if the height: auto is necessary though.

http://jsfiddle.net/KBHcs/

To give more explanation, the height: auto !important makes the content define the height of the element and the !important was overwriting the height: 100%. In this case, the "sd" was the only thing in the ul as the li are absolutely positioned, and therefore, are not part of the document flow.