variable height scrolling div, positioned relative to variable height sibling

Question

recently i asked this question: overflow (scroll) - 100% container height about how to achieve a vertically scrolling div with variable height.

a very helpful user provided a solution using absolute positioning and height:100%, here: http://jsfiddle.net/TUwej/2/. in this fiddle, you can see the basic desired behavior - the scrolling div will fill the height of the main container as is determined by the content in the '#main' element.

i modified this somewhat and used top:0 bottom:0 instead of height:100% to accommodate an element above the scrollable area. the modified version can be seen here: http://jsfiddle.net/N6muv/3/ (i realize there is a little extra markup and class definitions that are empty, and an adjacent sibling combinator that appears redundant - these are vestiges of the actual structure)

everything is fine, except that i had to supply a fixed top coordinate for the scrolling div (note the top:120px declaration for the '.sidebar-list' selector). i'd like this to be relative to the '.sidebar-options' element above it, so that the options container above can have any number of options and the scrollable div will position itself appropriately. using fixed coordinates, if any options are added or removed, either overlap occurs or unnecessary space develops - i'd like to avoid this. the exact number of options that should appear varies between views.

i had thought to wrap the scrolling div in a relatively positioned container, but doing that creates a conflict with bottom:0 no longer indicating the height of the main '.wrapper' container (which it should do). similarly, using height:100% will use the computed height of the '.wrapper' container so the scrollable div will extend beyond the boundary of the '.wrapper'.

is there a way to keep the functionality shown in the second fiddle, but with the top of the scrollable div relative to the bottom of the options div (which will be of variable height)?

thanks in advance for any suggestions.

EDIT: S.O. asked if i wanted to start a bounty, so i did (first time) - hopefully 100 pts isn't considered too low. still looking for a no-script, pure-css solution that doesn't involve fixed coordinates or dimensions for the y-axis (width and left assignments are OK). thx

Answer 1

UPDATE:

Import JQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

New Demo: http://jsfiddle.net/Mutant_Tractor/N6muv/28/

Add this nice little JQuery script to your page:

var contentColHeight = $('.content').height();
var optionColHeight = $('.sidebar-options').height();
var newHeight = contentColHeight - optionColHeight;
$('.sidebar-list').height(newHeight);

---

OLD

How does this suit your needs? http://jsfiddle.net/Mutant_Tractor/N6muv/4/

I changed position:absolute; to position:relative and added a static height:190px as well as adding background:pink; (so the bg always looks right)

You can try adding and removing Options from the list above to demo this.

Full code:

.sidebar-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background : pink;
}

Answer 2

You need to define the height of the sidebar list coz you have to set this content to scroll-able and min or max height must be defined. And you could set .sidebar-list{position: relative;} See this Fiddle

Edit Your .sidebar-content should also be relatively positioned See this Fiddle whatever your 'options' content contains.

Answer 3

I believe you should remove absolute positioning on the inner elements and try overflow:auto.