'Equal height adding extra space over all at bottom

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/

jquerywordpress


Solution 1:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions