Equal height adding extra space over all at bottom

Question

So I am using equal heights for really the first time and I am successful with getting the child div (#sidebar) to match the height of the parent div (#Content). However, extra space is being added on every page. The more content, making the vertical scroll longer, causes an even larger area of empty space at the bottom of the page. I am using a custom Wordpress theme that I have developed so perhaps the problem lies somewhere in there. The code I am currently using is below:

<script type="text/javascript">
    $(function(){ $('#Content').equalHeights(); });
</script>`

Here is a link to the site: http://fentonauto.com/web/category/sales/

Answer 1

Do you want the sidebar extended to the bottom of the page or equal to the page content's height?

Try this -

jQuery(document).ready(function($) {

    //THIS LINE GETS THE HEIGHT OF THE LEFT COLUMN DIV
    var leftColumnHeight = $("#left-column").outerHeight();

    //THIS LINE APPLIES THE HEIGHT TO THE SIDEBAR
    $("#sidebar").css( "height", leftColumnHeight );

    //TELLS YOU THE HEIGHT OF THE LEFT CONTENT DIV (DO NOT PUT ON WEBSITE)\\
    alert ("left column height is: "+leftColumnHeight);
});

Example