Bootstrap column size equal to a specific column

Question

I have BootStrap 4 and I'm trying to get some column's height equal to another. Here is my code:

<div class="container" style="overflow:hidden">
    <div class="row" style="overflow:hidden">
        <div class="col-md-8" id="firstColumn">
            <div class="row">
                <div class="col-md-6">
                </div>
                <div class="col-md-6">
                </div>
            </div>
            <div class="row">
                <div class="col-md">
                </div>
            </div>
        </div>
        <div class="col-md-4" id="secondColumn" style="overflow:auto">
        </div>
    </div>
</div>

My secondColumn has a higher height than firstColumn, but I want it to have the same height as firstColumn while also being scrollable.

I want to mention that my columns are in a modal which when user clicks a button loads data from my database and populates the modal. So on page load if I set their height equal it will not work.

Even though it's a duplicate this question is a little different from the others. It's asking how to shorten the divs, not increase them. — Joseph Cho, Jul 02 '18 at 21:11

score 0 · Accepted Answer · answered Jul 02 '18 at 20:52

The best I can recommend is to look at using the resize jQuery event to look at the heights of both divs and setting the height of the shorter to that of the taller.

Something like this:

$(window).resize(function() {
    firstHeight = $("#firstColumn").height();
    secondHeight = $("#secondColumn").height();
    if (firstHeight > secondHeight) {
        $("#secondColumn").height(firstHeight);
    } else {
        $("#firstColumn").height(secondHeight);
    }
}

It's likely you'd want this to run on page open too, so you could make the contents a named function that you can recall in both the ready and resize triggers.

SirPilan · Answer 2 · 2018-07-02T21:11:14.350

Use Flexboxes!

.wrapper {
  display: flex;
  flex-direction: row;
  border: 5px solid yellow;
}

.colA {
  background-color: #EAE;
  flex: 1 0 auto;
  line-height: 2em;
}

.colB {
  background-color: #AEE;
  flex: 1 0 auto;
  max-height: 70px;
  overflow-y: scroll;
  line-height: 2em;
}

<div class="wrapper">
  <div class="colA">
    One Line
  </div>
  <div class="colB">
    More<br/>
    than<br/>
    one<br/>
    line!
  </div>
</div>

Or via Bootstrap 4 - Bootstrap 4 supports this natively. row-eq-height

.wrapper {
  border: 5px solid yellow;
}

.colA {
  background-color: #EAE;
  line-height: 2em;
}

.colB {
  background-color: #AEE;
  max-height: 70px;
  overflow-y: scroll;
  line-height: 2em;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"/>
<div class="wrapper row row-eq-height">
  <div class="colA col-6">
    One Line
  </div>
  <div class="colB col-6">
    More<br/>
    than<br/>
    one<br/>
    line!
  </div>
</div>

Edit: made scrollable colB To make a col scrollable you have to set height or max-height and define overflow as shown in the examples.

Bootstrap column size equal to a specific column

2 Answers2