letting absoltuely positioned area grow

Please see this page for reference: test page

I am designing a site that has a sidebar that contains an accordion style vertical nav bar. The sidebar which contains this accordion is absolutely positioned, relative to the container that holds it. I did this so t开发者_JAVA百科he sidebar would stay sticky to the top, bottom, and side.

When you click the products button, the accordion expands well past the container, overflowing into the footer. If I floated the sidebar to the left, it would grow to accommodate the entire sidebar, but it wouldn't be sticky to the bottom of the container by default.

I need a solution that allows the sidebar to be absolutely positioned, and allow growth if the accordion expands. Any Ideas? Jquery solution perhaps?

I don´t see why you can not use float.

What do you mean with sticky to bottom?

EDIT

Because you use absolute positioning there is now way to expand the container, because the menu isn't in the flow anymore. (OK you can use JavaScript), but I really don't see a problem.

Although the question was how can you make an absolutely positioned area grow, the answer is you simply cannot without using javascript.

After some research it seems that many people are stuck in this very same position: "How do you get the right column’s (sidebar) to extend all the way down the page?"

The answer is using Faux Columns!

http://www.alistapart.com/articles/fauxcolumns/

It should expand automatically if you float it left and absolutely position it.

I have found that setting overflow: hidden; on the containing div usually works wonders. Since you told the content to hide, the browser goes out of its way to not hide it (unless you have set a height or max-height). This works well in general when a container has floats, etc. No need to add a div to clear: both;, etc.

Give this a try...

Edit: I've been playing around with this and I can't get it to work on your site. Can you just float left the menu and main area, then set the container to overflow: hidden;? That's what I have used in the past.

A jQuery solution should be possible with something like this hooked onto the click listeners for the navigation links:

$('#leftbar').height( $('#leftbar')[0].scrollHeight );
$('#container').height( $('#container')[0].scrollHeight );

It should basically resize the bar and container to contain their contents. You may want to adjust by a few pixels or something, but this is the idea.

Edit: This might be complicated by the fact that the accordion doesn't expand the entire submenu at once, may have to put this inside the resizing loop somewhere, or just do it at the end of the animation if that momentary discrepancy is okay with you.