floating vs absolutely positioning conundrum

I recently asked a question on SO asking how to set the height of a sidebar equal to the container on this homepage.

Basical开发者_如何学JAVAly, I have two sidebars, one of which contains an accordion. When you click on certain buttons (in this case the "Services" button, the accordion opens up and causes the sidebar to grow. That is what I want, however, the height of the sidebars are not sticky to the bottom of the container.

TO solve this, I would normally position the sidebars absolutely to the top and bottom of the container. The PROBLEM with this is that as the accordion expands (on click) , it will overlap over the bottom of the sidebar.

I need a solution where as he accordion grows, the sidebar will grow with it. The solution must also let the sidebars equal the full height of the container. Pure CSS or Jquery welcomed!!

I usually get around this by setting a background image on my main content container. See https://lisaleslie9.com/ for an example of the sidebar and content area.

I'll have a container div, a main-content div, and an aside.

e.g.

<div class="container">
    <div class="main-content">

    </div>

    <aside>
      // Your accordion here
    </aside>

<div class="clear"></div>

</div><!-- end container -->

.clear {clear:both;}

and have the background repeat-y on the container area that includes the background image for aside.

I'll do a clear div under both the inner divs to push the height.

Not sure about your layout design. But I figured this may be what you're looking for.