Question 43109 in Html Question posted in
Some basic documentation can be found here.

Maintain the same height of nested div inside 3 column – Html

I have 3 columns these columns have same section e.g title, address and etc. not only i want the card to have the same height but also the nested section should have the same height e.g if in one section title having 3 line, in second and third section title should maintain the same height even if it is short. I have tried doing this but failed so far.

<div class="container">

  <div class="card">
    <div class="row" style="background-color: yellowgreen;">Hey this is tariq</div>
    <div class="row">Hey this is tariq 
      Hey this is tariq
      Hey this is tariq
      Hey this is tariq

    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
    </div>
        <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
      asdfaasd 
      asdfsa
    </div>

  </div>
  <div class="card">  <div class="row" style="background-color: yellowgreen;">Hey this is tariq</div>
    <div class="row">Hey this is tariq 
      Hey this is tariq
      Hey this is tariq
      Hey this is tariq

    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
    </div>
        <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
      asdfaasd 
      asdfsa
    </div></div>
  <div class="card">  
    <div class="row" style="background-color: yellowgreen;">Hey this is tariq 
      Hey this is tariq
      Hey this is tariq
      Hey this is tariq

    </div><div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
      asdfaasd 
      asdfsa
    </div>
    <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas 
      asdf asdnasdfnasdfas fasd
      fa
      sdfa sdfasd 
      asdfaasd 
      asdfsa
    </div><div class="row">Hey this is tariq</div>
        
  </div>


</div>

<style>
  .container {
    display: flex;
    gap: 14px;
    justify-content: center;
}
.card {
    width: 22%;
    height: 600px;
    background: radial-gradient(black, transparent);
    align-self: stretch;
}
.row{
  border-bottom: 1px solid;
}
</style>

Same height of green section in all 3 column

Tags:

3

Answers


  1. 0 
        <div class="container">
      <div class="heder">
        <div class="row title" style="background-color: yellowgreen;">Hey this is tariq</div>
        <div class="row title" style="background-color: yellowgreen;">Hey this is tariq</div>
        <div class="row title" style="background-color: yellowgreen;">Hey this is tariq
          Hey this is tariq
          Hey this is tariq
          Hey this is tariq
    
        </div>
      </div>
      <div class="content">
        <div class="card">
    
          <div class="row">Hey this is tariq
            Hey this is tariq
            Hey this is tariq
            Hey this is tariq
    
          </div>
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
          </div>
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
            asdfaasd
            asdfsa
          </div>
    
        </div>
        <div class="card">
    
          <div class="row">Hey this is tariq
            Hey this is tariq
            Hey this is tariq
            Hey this is tariq
    
          </div>
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
          </div>
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
            asdfaasd
            asdfsa
          </div>
        </div>
    
        <div class="card">
    
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsaHey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
            asdfaasd
            asdfsa
          </div>
          <div class="row">Hey this is tariq asdfa sdfasd asdnasdfnasdfas
            asdf asdnasdfnasdfas fasd
            fa
            sdfa sdfasd
            asdfaasd
            asdfsa
          </div>
          <div class="row">Hey this is tariq</div>
    
        </div>
      </div>
    
    
    </div>
    
    <style>
      .container {
        display: flex;
        flex-direction: column;
        /* gap: 14px; */
        /* justify-content: center; */
      }
    
      .heder {
        display: flex;
        justify-content: center;
      }
    
      .heder .title {
        width: 22%;
        height: auto;
        margin: 0 10px;
      }
    
      .content {
        display: flex;
        justify-content: center;
      }
    
      .content .card {
        margin: 0 10px;
      }
    
      .card {
        width: 22%;
        height: 600px;
        background: radial-gradient(black, transparent);
        align-self: stretch;
      }
    
      .row {
        border-bottom: 1px solid;
      }
    
      .title {
        height: fit-content;
      }
    
    </style>
    Login or Signup to reply.
  2. 0

    .row {
    border-bottom: 1px solid;min-height:200px
    }
    Try this

    Login or Signup to reply.
  3. 0

    Solution with JavaScript

    This script gets all the height values of rows and stores highest value in array for every row type. And then sets all rows to that highest hight value.

    const container = document.getElementsByClassName("container")[0];
const cards = container.children;

let requiredHeights = [];

const getRequiredHeights = (cards) => {
  [...cards].map((card) => {
    rows = card.children;
    [...rows].map((row, index) => {
      let height = 0
      if(requiredHeights[index]!=undefined) {
        height = requiredHeights[index];
      }
      let rowHeight = row.offsetHeight;
      if(rowHeight > height) {
        requiredHeights[index] = rowHeight;
      }
    })
  }) 
}

const setRowHeights = (cards) => {
  [...cards].map(card => {
    rows = card.children;
    [...rows].map((row, index) => {
      row.style.height = requiredHeights[index] + 'px';
      console.log(row.style.height);
    })
  })
}

getRequiredHeights(cards);
setRowHeights(cards);

    check out this codepen that shows solution:
    https://codepen.io/Nadir_Alishly/pen/GRYKREp

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search