How can I make equal height system without using any javascript or jquery plugin

Question

I want to make my specific div element's child will be equal height with out using any jquery plugin or Javascript. I want to make this by CSS.

So can any one give me an idea how can i make this?

Answer 1

Yes you can. You have to use css3 dispaly: table; for the equal height wrapper and display: table-cell; for the each element of equal height wrapper.

Here is the simple way.

HTML & CSS Code:

.equal-height-row{
  display: table;
}
.equal-height-row > .equal-height-box{
  display: table-cell;
  vertical-align: middle;
  padding: 2em;
  box-sizing: border-box;
  background-color: lightgrey;
}

<div class="equal-height-row">
  
   <div class="equal-height-box">Box1<br>box 1 content</div>
   <div class="equal-height-box">Box2</div>
   <div class="equal-height-box">Box3</div>
  
</div>

Answer 2

A modern and preferred way is to use flexbox, which aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

At this link, A guide to flexbox, you will find a really good start how it works.

.row {
  display: flex;
}
.row > div {
  flex: 1;
  background-color: lightblue;
  padding: 10px;
  margin: 5px 10px;
}

<div class="row">
   <div>First</div>
   <div>Second<br>having<br>more than<br>one line</div>
   <div>Third</div>
</div>