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

问题

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 div.

The problem is that there is no way of knowing ahead of time what the resulting height of the list ought to be, even if the height of the header is known.

Is there any way to deal with this without resorting to javascript?

What we need is a style like height: fill;

回答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/

回答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/

来源：https://stackoverflow.com/questions/10420273/css-fix-the-height-of-a-section-within-a-variable-height-element