Responsive grid 2 columns need to be the same height

Question

I have a responsive website that has a main content area ( .content-wrapper ) and a sidebar area ( .search-listing ). I need the two columns to be the same height. Currently I was trying to use the following:

jQuery(document).ready(function() {
    var divone = jQuery(".search-listing").height();
    var divtwo = jQuery(".content-wrapper").height();

    var maxdiv = Math.max(divone, divtwo);

    jQuery(".search-listing").height(maxdiv);
    jQuery(".content-wrapper").height(maxdiv);

});

But the problem is that .search-listing starts down on the page further than .content-wrapper . You can see it here:

http://landpros.turnpostinteractive.com/LandPros_Results_2.html

The sidebar is the same height but I need to subtract some pixels because the div .search-listing is starting down on the page in a different spot than .content-wrapper.

Any help would be very much appreciated!

Answer 1

If .content-wrapper is taller than the sum of .map, .search-listing, and .search-listing-header, set .search-listing to the height of .content-wrapper minus .map and .search-listing-header.

If the sum of .map and .search-listing is taller than .content wrapper, set the height of .content-wrapper to the sum of .map, .search-listing-header .search-listing.

<script type="text/javascript">
jQuery(document).ready(function() {
    var searchListing = jQuery(".search-listing").height();
    var wrapper = jQuery(".content-wrapper").height();
    var mapping = jQuery(".map").height();
    var header = jQuery(".search-listing-header").height();

    if ( wrapper > searchListing+mapping+header ) {
      jQuery(".search-listing").height(wrapper-mapping-header);
    }

    else {
      jQuery(".content-wrapper").height(searchListing+mapping+header);
    }

});
</script>

Answer 2

可能的克隆作者得到了答案