Patrick Patrick - 2 months ago 18
CSS Question

Bootstrap well same height

I use the bootstrap class well for decoration. I have two divs with different amount of entries inside. Is it possible that both wells fill their parent and have always the same height no matter how many entries they contain?

<div class="container">
<div class="row">
<div class="col-xs-8">
<strong>Title</strong>
<div class="well well-sm">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
<div>Item 5</div>
<div>Item 6</div>
</div>
</div>
<div class="col-xs-4">
<strong>Title</strong>
<div class="well well-sm">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</div>
</div>
</div>


I tried different solutions but didn’t succeed. I want to avoid the flex box layout because of its weak support. If I use tables instead of bootstrap columns I get the same result. How can I handle this with CSS (and possibly without adding JavaScript) ?

jsfiddle

Answer

JavaScript:

If you are okay with using a little bit of JavaScript then the following will be exactly what you need:

var
  elements = document.querySelectorAll(".well"),
  heights = [];

/* Getting an array with the heights */
[].forEach.call(elements, function(each) {
  heights[heights.length] = getComputedStyle(each, null).getPropertyValue("height");
});

/* Sorting the array to get the greatest value first */
heights.sort(function(a, b) {
  return parseFloat(b) - parseFloat(a);
});

/* Applying the greatest height to each element */
[].forEach.call(elements, function(each) {
  each.style.height = heights[0];
});

jQuery:

If instead you're in for shorter code and you use jQuery you can use the following code:

var max;

/* Getting the greatest height */
$(".well").each(function() {
  max = ($(this).height() > max) ? $(this).height() : max;
});

/* Applying the greatest height to each element */
$(".well").height(max);

Execution times:

  1. JavaScript: 0.562ms
  2. jQuery: 2.889ms (~5x slower)

Here's a snippet demonstrating the solution:

/* ----- JavaScript ----- */
var
  elements = document.querySelectorAll(".well"),
  heights = [];

[].forEach.call(elements, function(each) {
  heights[heights.length] = getComputedStyle(each, null).getPropertyValue("height");
});

heights.sort(function(a, b) {
  return parseFloat(b) - parseFloat(a);
});

[].forEach.call(elements, function(each) {
  each.style.height = heights[0];
});
/* ----- CSS ----- */
.well {
  border: 1px solid blue !important;
}
<!----- HTML ----->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet" type="text/css" />
<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <strong>Title</strong>
      <div class="well well-sm">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
        <div>Item 6</div>
      </div>
    </div>
    <div class="col-xs-4">
      <strong>Title</strong>
      <div class="well well-sm">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
      </div>
    </div>
  </div>
</div>

Comments