Increase all box height equally with css or jquery, javascript

Question

I have bellow html structure which will not change.

<article class="col-md-3 col-sm-3 diagnostic-block worth">
    <blockquote>
        <header>
            <h6>
                <a onclick="javascript:doOpenURL('xyz.aspx?Section=11','contentArea','1020','700','1');" href="javascript:void(null)">Page heading will goes</a>
            </h6>
        </header>
        <footer>
            <small>Text hereText hereText hereText hereText hereText here</small>
            <p>Worth a look</p>
        </footer>
    </blockquote>
</article>

enter image description here

why don't you a *fixed height* to your containers then, if they won't change? — nicholaswmin, Jan 05 '15 at 11:22
possible duplicate of [CSS - Equal Height Columns?](http://stackoverflow.com/questions/2114757/css-equal-height-columns) — Pavlo, Jan 05 '15 at 11:23

score 0 · Answer 1 · answered Jan 05 '15 at 11:26

http://codepen.io/pen/KwNRjQ This should achieve what you want.

$.fn.eqHeights = function(options) {

var defaults = {  
    child: false ,
  parentSelector:null
};  
var options = $.extend(defaults, options); 

var el = $(this);
if (el.length > 0 && !el.data('eqHeights')) {
    $(window).bind('resize.eqHeights', function() {
        el.eqHeights();
    });
    el.data('eqHeights', true);
}

if( options.child && options.child.length > 0 ){
    var elmtns = $(options.child, this);
} else {
    var elmtns = $(this).children();
}

var prevTop = 0;
var max_height = 0;
var elements = [];
var parentEl;
elmtns.height('auto').each(function() {

  if(options.parentSelector && parentEl !== $(this).parents(options.parentSelector).get(0)){
    $(elements).height(max_height);
    max_height = 0;
    prevTop = 0;
    elements=[];
    parentEl = $(this).parents(options.parentSelector).get(0);
  }

    var thisTop = this.offsetTop;

    if (prevTop > 0 && prevTop != thisTop) {
        $(elements).height(max_height);
        max_height = $(this).height();
        elements = [];
    }
    max_height = Math.max(max_height, $(this).height());

    prevTop = this.offsetTop;
    elements.push(this);
});

$(elements).height(max_height);
};

score 0 · Answer 2 · answered Jan 05 '15 at 12:16

0

If they all have same height and there is not any responsive issue then you can use , min-height property of css :)

answered Jan 05 '15 at 12:16

Tiger

404
1
4
13

Increase all box height equally with css or jquery, javascript

2 Answers2