CODEWITHSUNDEEP
csspositioning
Steven Lu
Steven Lu

Reputation: 43457

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;

Upvotes: 1

Views: 9313

Answers (2)

Steven Lu
Steven Lu

Reputation: 43457

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/

Upvotes: 6

Idrizi.A
Idrizi.A

Reputation: 12010

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/

Upvotes: 0

Related Questions