List items with same height

Question

I have created a fiddle: http://jsfiddle.net/pQZ8f/

I want to have both the list items to be of same height without setting height manually. I want it to auto grow.

Answer 1

It's 2018, and we have display: flex, with 97.66% browser support (https://caniuse.com/#feat=flexbox)

With flexbox, all you need to do is:

ul {
  display: flex;
}

li{
 width:100px;
 border: 1px solid black;   
}

Here's the fiddle: http://jsfiddle.net/pQZ8f/1076/

Answer 2

It seems you're looking for a tabular layout, so maybe the best bet would be to use a <table> instead of floating <li> elements.

That said, you can also specify tabular styles on your elements:

ul {
    display: table-row;
}

li {
    width: 100px;
    border: 1px solid black;
    display: table-cell;
}

This should work on most modern browsers. You will find an updated fiddle here.

Answer 3

List is set as table and it will contain table properties. for list item when you set table-cell they will get table cell properties and by default all table cells will get same height.

<!--SCSS-->
.list {
     display: table;

    .list-item {
       display: table-cell;
    }
}



<!--html-->
<ul class="list">
    <li class="list-iteam">
        <h1>Heading</h1>
        <p>Details in text</p>
    </li>
    <li class="list-iteam">
        <h1>Heading 2</h1>
    </li>
    <li class="list-iteam">
        <h1>Heading 2</h1>
        <p>this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text this is text </p>
    </li> 
</ul>

Answer 4

I use jquery.matchHeight.js library for this purpose. Adding class ="frame-height" to all li elements, make all li elements the same height as the highest li element.

Answer 5

ul 
{
  display: table;
}

li
{
  display:table-cell;   
} 

Answer 6

Ahh, yee old same height column problem.

One solution is to fart around with bottom margin / padding.

Works in IE7+ (might even work using ie6, I don't have it installed)

ul {
    overflow: hidden;
    border: 1px solid black;
    float: left;
}
li {
    float:left;
    width:100px;
    background: red;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
}
li + li {
    border-left: 1px solid black;
}

JSfiddle Demo