Question

I am new to css but having a problem. I want to get the sidebar content height to match or equal the same height as the body. I am using currently but that’s only good for the stating height:

   min-height: 240px;

You can find the site here: http://jsfiddle.net/ZPvLb/

Scroll down the page until you see the body and to the right is the sidebar. See the difference?

Any suggestions or help on how I could do this? Thanks!

Answer 1

Since you tagged jQuery it’s possible to do this using javascript.

<script type="text/javascript">
    $(document).ready( function() {
        $('.content', '#side').height($('.content', '#main').height());
    });
</script>

That will match the sidebar content height to the main content height. Put that inside the head tag, and be sure to include the jQuery library.

A pure CSS solution is going to take much more work as already pointed out.

Here’s the changes included in the jsfiddle