Variable scroll scroll height relative to sibling variable height

Question

I recently asked this question: overflow (scrolling) - 100% container height on how to achieve a vertically scrollable div with a variable height.

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

i changed this a bit and used top: 0 bottom: 0 instead of height: 100% to place the element over the scrollable area. the modified version can be seen here: http://jsfiddle.net/N6muv/3/ (I understand that there are a few additional markups and definitions of classes that are empty and related which seems redundant - these are remnants of the actual structure)

everything is fine, except that I had to specify a fixed top coordinate for the scrollable div (note the top: 120px declaration for the ".sidebar-list" selector). I would like it to be relative to the ".barbar options" element above it, so that the above options container can have any number of options, and the scrollable div will fit correctly. using fixed coordinates, if any options are added or removed, either overlap or unnecessary space occurs - I would like to avoid this. the exact number of displayed parameters depends on the type.

I was thinking about wrapping a scrollable div in a relatively positioned container, but this creates a conflict with the bottom: 0 no longer indicates the height of the main .wrapper container (which it should do). similarly, using height: 100% will use the calculated height of the .wrapper container, so the scrollable div will go beyond the ".wrapper" border.

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 div options (which will be of variable height)?

in advance for any suggestions.

EDIT: SO asked if I want to start generosity, so I did (the first time) - I hope 100 points are not considered too low. still looking for a solution without a script, pure-css that does not include fixed coordinates or dimensions for the y axis (width and left settings 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 fit your needs? http://jsfiddle.net/Mutant_Tractor/N6muv/4/

I changed position:absolute; on position:relative and added static height:190px , and also added background:pink; (so bg always looks right)

You can try adding and removing options from the list above to demonstrate this.

Full code:

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

Answer 2

I believe that you should remove the absolute positioning in the internal elements and try overflow: auto.

Answer 3

You need to determine the height of the sidebar list, because you must set this content to scroll and determine the minimum or maximum height. And you can set .sidebar-list{position: relative;} See This is Fiddle

Change Your .sidebar-content should also be relatively located. See Fiddle regardless of the contents of your "variant".