1

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;

Community
  • 1
  • 1
Steven Lu
  • 41,389
  • 58
  • 210
  • 364
  • So you have container div with a fixed height, a div inside it with a fixed height and you want other div inside to grab the remaining height? – AlexMA May 02 '12 at 19:32
  • the container div has an *adjustable* height (`height:100%` or some such). I'm fairly convinced that my solution is the only current way to deal with this and is a great use of `position: absolute`. – Steven Lu May 02 '12 at 19:32

2 Answers2

6

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/

Steven Lu
  • 41,389
  • 58
  • 210
  • 364
  • This is a good answer. My only comment is that I would use position:relative for the container in most cases (though it won't work in this particular fiddle without a wrapper element). – AlexMA May 03 '12 at 02:56
  • In my particular case I needed my list within a position:fixed page element. The method works fine with either or. – Steven Lu May 03 '12 at 03:41
0

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/

Idrizi.A
  • 9,819
  • 11
  • 47
  • 88
  • 1
    This won't work. Resize the vertical size of the containing area. This only works for one specific height of browser viewport. – Steven Lu May 02 '12 at 19:30