How can I set same class DIV's height as highest div height

Question

I've 3 same class divs and divs height value is auto, how can I set same class divs height to higher div height? Same Class Div

Thanks in advance.

Post code, not a picture of code and create a [MCVE] to show your problem properly. If you're going to be lazy, then don't expect to get any help — Pete, Jan 19 '18 at 10:52
You can use CSS3 flex/flexbox. For more, post better requirement and code you tried so far with the help of SO Snippet. — divy3993, Jan 19 '18 at 10:54
@Buraktncblk Change the height property to 250Px .so that all the div's has the same height — ram12393, Jan 19 '18 at 10:58

score 2 · Answer 1 · answered Jan 19 '18 at 11:25

You can simply use css flex on container. I write an example below.

CSS

.box{
  background: #000;
  color: white;
  margin: 15px;
  box-sizing: border-box;
}

.box-container{
  width:100%;
  height: auto;
  display: flex;
}

HTML

<div class="box-container">
  <div class="box">
    foo<br>foo<br>foo
  </div>
  <div class="box">
    foo<br>foo
  </div>
  <div class="box">
    foo
  </div>
</div>

score 1 · Accepted Answer · answered Jan 19 '18 at 11:33

1

You can Use

display:flex

for your container in Modern Browsers

and for Compatibilty in Older Browser Such as Internet Explorer You can Use

display:table-cell

in each div

answered Jan 19 '18 at 11:33

Ali Khavari

26
1

score 0 · Answer 3 · answered Jan 19 '18 at 10:56

you could use flexbox for this:

a very useful online tool: http://the-echoplex.net/flexyboxes/

example:

.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.flex-item {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    background: gray;
    margin: 5px;
}

<div class="flex-container">
    <div class="flex-item">
        Test <br />
    </div>
    <div class="flex-item">
        Test <br />Test <br />Test <br />
    </div>
    <div class="flex-item">
        Test <br />Test <br />Test <br />Test <br />Test <br />
    </div>
</div>

score 0 · Answer 4 · answered Jan 19 '18 at 11:29

Add A wrapper row.

HTML

      <div class="row">
      <div class="checklist">
        <table> <!-- asp controls:CheckListBox -->
          <tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr>
        </table>
      </div>

      <div class="checklist">
        <table> <!-- asp controls:CheckListBox -->
          <tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr>
        </table>
      </div>

      <div class="checklist">
        <table> <!-- asp controls:CheckListBox -->
          <tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr><tr>
            <td>item1</td>
          </tr>
          <tr>
            <td>item2</td>
          </tr>
        </table>
      </div>
      </div>

CSS

.row{
  border: 1px solid red;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.checklist {
  border: 1px solid #ccc;
  overflow-y: scroll;
  max-width: 200px;
  max-height: 120px;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;      flex: 1;
}
.checklist table {
  height: auto;
 width: 160px;  
}

John Zenith · Answer 5 · 2018-01-19T16:08:58.570

You can do this with jQuery very easily.

Algorithm 1. Set a height for the checkbox elements 2. Get the div with the most checkbox elements 3. Set the height for all checklist elements by multiplying the most checkbox elements with the checkbox element height.

jQuery( document ).ready( function() {
    var mostChecklist,
        checklists = [ ],
        checkboxHeight = '30'; // you can modify this value

    // Get all checklist length
    JQuery('.checklist')
    .each( function( i, checklist ) {
        // Get all input checkbox in checklist
        checklists.push( 
            jQuery( checklist ).children('input:checkbox').length 
        );
    });

    // Get max number in checklists array
    mostChecklist = checklists.reduce(
        function( a, b ) {
            return Math.max( a, b );
        }
    );

    // Set the height of all checklist elements
    jQuery('.checklist').css( 'height', checkboxHeight * mostChecklist +'px' );
});

How can I set same class DIV's height as highest div height

5 Answers5