0

I'd like to set the height of all 3 columns to be the height of the tallest column in my grid. This will change on a page-by-page basis, so is there a way to do this without setting an actual min-height value?

https://jsfiddle.net/t7v5x48q/

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">

<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec, ornare in diam. Nullam iaculis sem non mollis fermentum. Morbi pellentesque.</p>
</div>
</div>

<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec, ornare in diam. Nullam.</p>
</div>
</div>

<div class="col-md-4 col-sm-4 col-xs-12 portfolio-item">
<div style="background: #eaeaea; padding: 10px;"><a href="#"><img class="img-responsive" src="http://www.placehold.it/300x300" alt="" /></a>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mollis faucibus dui, a malesuada nibh sagittis ut. Nunc mauris velit, rutrum id lobortis nec.</p>
</div>
</div>

</div>
michaelmcgurk
  • 6,367
  • 23
  • 94
  • 190

1 Answers1

1

The general idea is that you should check the heights of the columns you are interested in, with something like element.offsetHeight and then apply the greatest of them to all of them with element.style.height

Another way is to use the CSS flex model, in which case you won't need JavasScript

Here is a very naive implementation of what you want to achieve, based on your fiddle: https://jsfiddle.net/t7v5x48q/3/ (notice I also added a CSS rule, in addition to the JS)

Dimitris Karagiannis
  • 8,942
  • 8
  • 38
  • 63