CSS: fix the height of a section within a variable height element

Question

Related to this question.

Here\'s a fiddle: http://jsfiddle.net/DRbRS/

Notice how the red-outlined list div does not align at the bottom of the green container

Answer 1

Using position: absolute and setting top, left, right, and bottom: http://jsfiddle.net/QARC9/

This article describes why it works.

http://www.alistapart.com/articles/conflictingabsolutepositions/

Answer 2

Replace your CSS with this

#container {

    left: 50px;
    width: 200px;
    position: fixed;
    height: 90%;
    border: 2px dashed green;
}


#header {
    height: 30px;
    line-height: 30px;
    text-align: center;    
    border: 2px dashed blue;
    margin-left:-2px;
    margin-top:-2px;
    width:200px
}

#list {    
    border: 2px dashed red;
    overflow: auto;
    height: 91%;
    width:200px;
    margin-left:-2px;
    margin-top:-2px;


}​

or see the demo here http://jsfiddle.net/enve/DRbRS/3/