Question

I have a layout where the container holds a sidebar. I need the sidebar to be the exact same height as the container. Please see this site where the sidebar is #leftbar and the container is #container

If you look at the site, you will see what I mean. I either need a pure css solution or a jquery solution.

One important thing to keep in mind The nav is a vertical accordion, so when certain buttons are clicked, the sidebar, #leftbar will expand vertically. The solution needs to accommodate growth, so simply matching their heights using jquery isn’t a viable solution.

Answer 1

Add the following properties to these elements:

#cotainer {
    position: relative
}

#leftbar {
    position: absolute;
    top: 0;
    bottom: 0;
}

#righthome {
    margin-left: 270px; /* looks to be about the width of the leftbar */
}

Giving the #leftbar the properties show, will ensure the top sticks to the top of the next parent element with position: relative, and the same for the bottom edge.

However this has a side effect. The #righthome element becomes the first thing in its parents box layout model, and therefore overlaps the left bar. To remedy this you give it a left margin to put it back in the place it would have been.