My HTML code consists of a container with two columns (content and sidebar) and a footer. The content contains a horizontal list with li elements that are populated via ajax when the "Load More" button is pressed. I am using Bootstrap and testing on Chrome, Win7.

I have encountered two issues:

First: When loading data using the 'Load More' button via ajax, the container overlaps the footer because the container height does not adjust correctly. I'm struggling to find a solution for this problem.

Second: On page load, there is a script running that sets fixed heights for both the content and sidebars. This script seems to be affecting the height adjustment when new data is loaded via ajax. I believe setting the same height for two columns in Bootstrap should not require javascript. Is there a non-javascript solution for this issue?

A live example can be viewed on this page: (scroll down and press Load more button).

The Javascript code that appears to set the fixed height for columns with class .equalcol.

/**
 * Javascript-Equal-Height-Responsive-Rows
 * https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
 */
(function(jQuery) {
    jQuery.fn.equalHeight = function() {
        var heights = [];
        jQuery.each(this, function(i, element) {
            jQueryelement = jQuery(element);
            var element_height;
            var includePadding = (jQueryelement.css('box-sizing') == 'border-box') || (jQueryelement.css('-moz-box-sizing') == 'border-box');
            if (includePadding) {
                element_height = jQueryelement.innerHeight();
            } else {
                element_height = jQueryelement.height();
            }
            heights.push(element_height);
        });
        this.height(Math.max.apply(window, heights));
        return this;
    };
    jQuery.fn.equalHeightGrid = function(columns) {
        var jQuerytiles = this;
        jQuerytiles.css('height', 'auto');
        for (var i = 0; i < jQuerytiles.length; i++) {
            if (i % columns === 0) {
                var row = jQuery(jQuerytiles[i]);
                for (var n = 1; n < columns; n++) {
                    row = row.add(jQuerytiles[i + n]);
                }
                row.equalHeight();
            }
        }
        return this;
    };
    jQuery.fn.detectGridColumns = function() {
        var offset = 0,
            cols = 0;
        this.each(function(i, elem) {
            var elem_offset = jQuery(elem).offset().top;
            if (offset === 0 || elem_offset == offset) {
                cols++;
                offset = elem_offset;
            } else {
                return false;
            }
        });
        return cols;
    };
    jQuery.fn.responsiveEqualHeightGrid = function() {
        var _this = this;

        function syncHeights() {
            var cols = _this.detectGridColumns();
            _this.equalHeightGrid(cols);
        }
        jQuery(window).bind('resize load', syncHeights);
        syncHeights();
        return this;
    };
})(jQuery);

jQuery(function(jQuery) {
    jQuery('.equalcol').responsiveEqualHeightGrid();
});

Main HTML markup:

 <div class="contents">
        <!-- Content Column Start -->
        <div class="custom-container front-container">
            <div class="row">

                <div class="front-page col-lg-9 col-md-12 col-sm-12 col-xs-12 equalcol conentsection">
                    <div id="pl-343">                        
                        <div class="panel-grid" id="pg-343-5">
                            <div class="panel-grid-cell" id="pgc-343-5-0">
                                <ul class="horizontal-list">
                                    <li class="post-2978 vmgallery type-vmgallery status-publish format-standard has-post-thumbnail hentry gallery_categories-dazadi-un-episki">
                                        <div class="col-md-7 col-sm-7 col-xs-7 horizontal-list-media">

                                        </div>
                                        <div class="col-md-5 col-sm-5 col-xs-5 info">

                                        </div>
                                        <div class="clearfix"></div>
                                    </li>
                                     ...
                                </ul>
                                <div class="loader" style="display: none;">
                                </div><button id="load_more_mix_homepage">Load more</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Dark Sidebar Start -->
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 equalcol blacksidebar">
                    ...
                   <div class="clearfix"></div>
                </div>
                <!-- Dark Sidebar End -->
            </div>
        </div>

    </div>
    <!-- Contents End -->
    <!-- Footer Start -->
    <footer class="style1">
        <div class="custom-container">

            <div class="row footerwidgets">               
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">

                </div>
                <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">                    
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-lg-10 col-md-10 col-sm-9 .col-xs-9">                    
                </div>
                <div class="col-lg-2 col-md-2 col-sm-3 .col-xs-3">                    
                </div>
            </div>
        </div>
    </footer>