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 the 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?
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/