Equal height columns using Bootstrap and jQuery

Question

I am using Bootstrap in a current Web project but I don't know how to dynamically set the same height of column elements.

I already know the .row-eq-height class but using that I loose the responsiveness of Bootstrap elements. I would like the #selection column to be at least as high as #map-container (or higher because it has a border and I don't want it to cut the content).

I already wrote few lines of jQuery:

var map_height = $('#map-container').height();
var selection_height = $('#selection').height();
if (selection_height < map_height) {
  $('#selection').css('height',map_height);
}

<div class="row" id="selection-wrapper">
    <div class="col-lg-7 col-xs-12" id="map-container">
            <!-- Zone for map display -->
        <div id="map"></div>
    </div>
    <div class="col-lg-5 col-xs-12">
        <div class="text-container" id="selection">
            // Content
        </div>
    </div>
</div>

Those lines work but I don't know how and when I should execute them as I would like to keep the equal height property all the time, even when the width of the container changes (which modifies the height of the #map-container).

Answer 1

function equal_height() {
    var map_height = $('#map-container').height();
    var selection_height = $('#selection').height();
    if (selection_height < map_height) {
        $('#selection').css('min-height',map_height);
    }
}
$(document).ready(function(){
    equal_height();
});
$(window).resize(function(){
    equal_height();
});