Create same height of multiple div using CSS

For create same height of blocks in html you can use either table property of CSS or Flex property.

1. To use table you need to create a container as Table and block as Table Cell.

.ht-container {
    display: table;
}

.ht-block {
    float: none;
    display: table-cell;
    vertical-align: top;
}
<div class="ht-container" style="background:#eee;">
    <div class="ht-block" style="background: red">Hello</div>
    <div class="ht-block" style="background: green">Hello This is text contained maximum height. You can test it here.</div>
    <div class="ht-block" style="background: yellow">Hello</div>
</div>

 

Output:

Hello
Hello This is text contained maximum height. You can test it here. Hello This is text contained maximum height. You can test it here. Hello This is text contained maximum height. You can test it here. Hello This is text contained maximum height. You can test it here.
Hello

 

2. Flex Property:

.ht-container-flex{
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: nowrap;
}
.ht-block-flex {
  display: flex;
  flex-direction: column;
}
<div class="ht-container-flex" style="background:#eee;">
    <div class="ht-block-flex" style="background: red">Hello</div>
    <div class="ht-block-flex" style="background: green">Hello This is text contained maximum height. You can test it here.</div>
    <div class="ht-block-flex" style="background: yellow">Hello</div>
</div>

 

Output:

Hello
Hello This is text contained maximum height. You can test it here. Hello This is text contained maximum height. You can test it here. Hello This is text contained maximum height. You can test it here. Hello This is text contained maximum height. You can test it here.
Hello

Keywords: