Bootstrap: how to make left and right containers with same height?

Question

Code:

#left {
  background-color: rgba(255,0,0,0.3);
}

#right {
  background-color: rgba(0,255,0,0.3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
<div class="col-xs-3" id="left">
<p>short</p>
</div>
<div class="col-xs-3" id="right">
<p>long</p><p>long</p><p>long</p><p>long</p><p>long</p>
</div>
</body>

As you see, the left container and right container with different height. Could anyone please give me some advice about making them with same height?

can you try with https://stackoverflow.com/questions/3275850/set-a-div-height-equal-with-of-another-div — Malay M, Oct 11 '17 at 08:12

Terry · Accepted Answer · 2017-10-11T08:26:20.430

By simply declaring display: flex on a wrapping parent will work. That means that you will have to wrap your columns in a new <div>, e.g.:

<div class="row row-equal-height">

  <div class="col-xs-3" id="left">
    <p>short</p>
  </div>
  <div class="col-xs-3" id="right">
    <p>long</p>
    <p>long</p>
    <p>long</p>
    <p>long</p>
    <p>long</p>
  </div>

</div>

For your CSS, you can do this:

.row-equal-height {
    display: flex;
}

However, this means that you will have to rely on browser support for CSS3 flexbox specification. The good news that, with vendor prefixes, it is surprisingly very widely supported today (>97%).

See proof-of-concept below:

#left {
  background-color: red;
}

#right {
  background-color: green;
}

.row-equal-height {
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="row row-equal-height">
    <div class="col-xs-3" id="left">
      <p>short</p>
    </div>
    <div class="col-xs-3" id="right">
      <p>long</p>
      <p>long</p>
      <p>long</p>
      <p>long</p>
      <p>long</p>
    </div>
  </div>
</body>

Last-ditch solution: `display: table`

You should consider this as a last-ditch solution, because as we all know, you should not be using tables for layout purposes. However, if you want to support browsers that do not support flexbox at all (cue IE9 and below), this might be your only way out:

#left {
  background-color: red;
}

#right {
  background-color: green;
}

.wrapper {
  display: table;
  border-collapse: collapse;
  width: 50%;
}

.row {
  display: table-row;
}

.row > div {
  display: table-cell;
  float: none;
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
  <div class="wrapper">
    <div class="row">
      <div class="col-xs-3" id="left">
        <p>short</p>
      </div>
      <div class="col-xs-3" id="right">
        <p>long</p>
        <p>long</p>
        <p>long</p>
        <p>long</p>
        <p>long</p>
      </div>
    </div>
  </div>
</body>

score 3 · Answer 2 · answered Oct 11 '17 at 08:18

3

you schould give them an extra id and add

display:   flex;

to that id

answered Oct 11 '17 at 08:18

timo stevens

372
1
3
15

score 2 · Answer 3 · answered Oct 11 '17 at 08:15

2

Get the height of the left div; I'm guessing that is the #left div; and assign it to a variable.

var setHeight = $("#left").height(); then you can use jQuery to get the right div and assign the content height using the variable.

$("#right").height(setHeight);

It is as simple as that. The final code will look like this.

var setHeight = $("#left").height();
$("#right").height(setHeight);

answered Oct 11 '17 at 08:15

Malay M

1,659
1
14
22

1

Oooof, in all honesty, I would not use a JS-based solution (or a jQuery-based solution, which means you have to load an overhead of an entire framework) when you can easily accomplish with `display: table` or `display: flex`. – Terry Oct 11 '17 at 08:18
@Terry you have already loaded jQuery for boostrap. – Malay M Oct 11 '17 at 08:30
True that, but just because you can solve a basic layout issue using JS doesn't mean you should. Your code does not take into account the possibility of the viewport resizing, or the container parent resizing, for example. The issue with JS is that it is not a reactive language, so for a very basic function like this means having to attach a lot of event listeners just to get it to work. – Terry Oct 11 '17 at 08:30

Bootstrap: how to make left and right containers with same height?

3 Answers3

Last-ditch solution: display: table

Last-ditch solution: `display: table`