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

Multimillionaire

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;
}

Plaided

@Myles Gray - thanks for the response, but the height of the .sidebar needs to match the height of the .content div, regardless of what's contained in either. this is how it works currently. adding a fixed height will make that portion of the functionality fail. – Multimillionaire

@BigMoMo I understand now, you want the height of the SCROLLABLE sidebar to be fluid? – Plaided

@Myles Gray - pretty much all heights and y-axis coordinates need to be fluid. the height of the sidebar (that contains sidebar-options and sidebar-list) should maintain the same height as .content (it does currently). the sidebar-options should be as big as it needs to be, and sidebar-list should take up all remaining space (it does now), and scroll anything in excess. here's a dirty little example of desired net behavior using tables that ONLY works in webkit (safari, chrome): jsfiddle.net/3mevq - you can add content to any of the three areas everything maintains. – Multimillionaire

@Myles Gray - just to further clarify, the sample in the fiddle from the original post (jsfiddle.net/N6muv/3) does everything correctly except that i have to supply a top coordinate to the sidebar-list that is equal to the height of the sidebar-options - everything else works. you can add content to .content or .sidebar-list and both will behave appropriately. also, i can't really 'fake' the bg - the actual layout has rounded corners, borders, inset shadows, etc... – Multimillionaire

@Myles Gray - thanks again for your input. you could even just set the top of the list div to the height of the options div, using my original setup: $('.sidebar-list').css('top', $('.sidebar-options').height() + 'px'). unfortunately, javascript is not an option. i need a pure css solution. upvote for the time and effort. – Multimillionaire

Is there any reason why you can't use JS? – Plaided

@Myles Gray - if the user has JS disabled, there is no 'graceful' fallback - that fragment would be effectively unusable. also, if the content in any of the containers changes, the function would have to be called again to update, and there's always the possibility that another source could do so without notifying the underlying script. e.g., if another plugin were to add content or rounded corners or tooltips or lightbox or font-rewrite or image generation or an animation effect, etc., to any of those containers, the layout would break. – Multimillionaire

@BigMoMo - That is not strictly true, If the JS IS disabled then all that happens is that the column simply extends to it's full height... – Plaided

@Myles Gray - strictly speaking, you're correct - it would not be unusable. but it certainly wouldn't be good UX either. the sidebar column, if not restricted, could (and very often would be) several times as large as the rest of the page. imagine if sidebar list had 200 thumbnails and descriptions in it. – Multimillionaire

@BigMoMo - Perhaps then there is a solution, will the options list always be the same size? – Plaided

@Myles Gray - nope. the .content, .sidebar-options, and .sidebar-list will all have dynamically generated content... if the options list was always the same size, the original version (the 2nd fiddle in the original post) would work, although again i want to be able to accommodate 'unforseen' eventualities (e.g., another plugin modifying the content during runtime, so any fixed height/top wouldn't work). i almost think that this is beyond what CSS is capable of, but since I was able to get it to work with tables (albeit only in webkit browsers), I suspect that it is possible, somehow... – Multimillionaire

@BigMoMo - DONT USE TABLES FOR LAYOUT... please :) - I'll work something out for you in CSS – Plaided

@BigMoMo - Sorry man I forgot about this question, What you are trying to do can only be achieved with JS, I would like to get it working in CSS as well but it isn't possible, do you have an example of the tables layout I can reverse engineer? Aside from that the above JS once imported with JQuery will do it perfectly every time in EVERY browser. Sometimes things just aren't worth the hacks and hassle you would put into them for the sake of saving a few Kb. – Plaided

@Myles Gray - no problem. I'm not trying to save Kb - but using javascript is very rigid - as I mentioned in comment dated Feb 8 at 23:07, if anything else ever affects any of the elements in question, the layout breaks if the function isn't called again (which might not be possible if the modification is from a discreet plugin, for example). anyway, my comment dated Feb 8 at 20:37 (the third one down) has a fiddle with the table version (that only works in webkit): jsfiddle.net/3mevq. i appreciate your time. – Multimillionaire

@BigMoMo - Are you suggesting that a plugin is able to change DOM level classes and id's without you knowing? Surely if you are able to implement the above solution with JS then you are able to know if this is the case... – Plaided

@Myles Gray - i'm not saying it can change classes or ids, but it certainly can add elements to the dom (or change their position or size). expandable textareas, sIFR, contentEditable, animation, some round-corner plugins insert elements into the DOM, even a fancy :hover effect might break it. JS would have to be notified (and the function called again) any time any dimensional property of any element in any of the 3 containers were affected. JS is far too inflexible to rely on for layout - worse than tables, IMHO :) although i know the new CW doesn't hold with that. – Multimillionaire

@Myles Gray - anyway - if it's not possible, then it's not possible. just frustrating to see if work with tables (albeit in a limited scope), but not with pure styling. i appreciate the time you've spent on this (sincerely) – Multimillionaire

@BigMoMo - I've read about display:table; and display:table-cell; and tried to implement them into a pure CSS solution but I have had no luck (even in webkit), You can have a play around but I don't believe it is possible. – Plaided

@BigMoMo Has this bounty been fulfilled? If so you can award it by choosing award bounty. – Plaided

@Myles Gray - apparently S.O. assigned it - the option isn't available – Multimillionaire

@BigMoMo No probs man, hope you got it solved anyway, If it has write in your own solution and mark as answered otherwise mark the answer that was the most helpful as the answer, later! – Plaided

Answer 2

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

Capitation

Answer 3

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.

Pretor