Set the element inside the div to a height of 100%

Question

I want to have an element inside a set of divs with a height of 100%. The element (ul element) should be set relatively. List items are set as absolute, but refer to the parent item.

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

How to set the green ul element to a height of 100%?

Thanks in advance!

Answer 1

I removed height: auto !important on #main . Then I managed to set height: 100% to #list .

I'm not sure what height: auto needed.

http://jsfiddle.net/KBHcs/

To give more explanation, height: auto !important makes the content determine the height of the element, and the importance value has been overwritten with height: 100% . In this case, "sd" was the only one in ul , since li absolutely positioned and therefore are not part of the document flow.

Answer 2

You can set absolute position for the #list element, and then set the top and bottom coordinates. Here is an example of your modified jsfiddle:

http://jsfiddle.net/ee78G/11/