css - Properly overflow without using javascript to set a static height?

Question

The problem is simple:

http://jsfiddle.net/boblauer/wfLGG/

In the left example, I have the whole thing scrolling, which works fine because I can set the scrolling div's height to 100%. In the right example, it doesn't work, because I don't know what my scrolling div's height should be, because it's sharing that space with another element. If I set it to 100%, it overflows from its container, causing the 2nd scrollbar that you see in the example.

I know I can use javascript to set the .scroll-container's height to (container height - height of the header), but is there a pure css solution to this problem? I hate having to use javascript for this, especially because when the window resizes, I have to recalculate the size of the scrolling div.

Edit: Sorry, I wasn't very clear. What I want is for the header to remain static at the top, while the list itself is scrollable.

Answer 1

设置overflow: y-scroll;为 on #ex2，它将表现为#ex1.

#ex1, #ex2 {
    float: left;
    height: 100%; 
    width: 45%;
    border: 1px solid black;   
    overflow: auto;   
}

#ex2 { overflow: y-scroll; }

演示

Answer 2

我认为这可能会有所帮助

.scroll-container {
    overflow: auto; 
    padding-top:20px;    
}

#ex2 span{
position:absolute;
    background:white;
}

jsFiddle