How to create equal height columns?

Question

css

Hello! Google-google eventually came here. Found a solution to this issue with display:table
Needed for bootstrap. Maybe there is some solution.

Block structure

<div class="col-md-6">
контент
</div>
<div class="col-md-6">
контент
</div>

Answer 1

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
}

getbootstrap.com.vn/examples/equal-height-columns

Answer 2

brm.io/jquery-match-height

Answer 3

<div class="row same-cols">
  <div class="col-md-6 same-height">1</div>
  <div class="col-md-6 same-height">1</div>
</div>

$('.same-cols').each(function(){

  var height = 0,
    cols = $(this).find('.same-height');

    cols.each(function(){
      if( $(this).innerHeight() > height ) height = $(this).innerHeight();
    });  

    cols.css( 'height', height + 'px');
});

If the same height is needed for a design, such as a background, then this can be done through CSS.

Answer 4

depending on what you need, if you need to align the columns in height, then there are several solutions.
All have their pros and cons.
If you need to make the same columns in the product catalog, which happens most often.
Then everything just throw additionally after every second position. дви кол-12
If you need it more difficult when there are 2-3 columns depending on the resolution, then follow the same scheme, but show this div only at this resolution.
Example
mydefile.ru/catalog
From a programming point of view, it's very easy to add an empty div to every second and third product. It does NOT require any zhs or media queries, no crutches. 100% product is visible and it will not crawl away. Cheap and cheerful
If the layout is more complex and height is required, then it is easier to actually set it. But most likely you are talking about a dynamic directory

Answer 5

There is a script ruseller.com/adds.php?id=2483&rub=11