2

In this case, the height:100% in col is not works, because .row is no height

div[class*='col']
{
    border:solid 1px #000;
    height:100%;
}
.row
{
    border:solid 1px #000;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>


If I set a height for row, all cols can match row height. But I don't want to set the height for row, because I want the row height can match to the biggest col height. How to use css to make all cols height 100%?

div[class*='col']
{
    border:solid 1px #000;
    height:100%;
}
.row
{
    border:solid 1px #000;
    height:500px;
}


<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">1<br>1<br>1<br>1<br>1<br>1<br>1<br></div>
        <div class="col-md-4">2</div>
        <div class="col-md-4">3</div>
    </div>
</div>
Zanon
  • 29,231
  • 20
  • 113
  • 126
CL So
  • 3,647
  • 10
  • 51
  • 95

2 Answers2

2

You can try display: table-cell;.

Here is the updated code

 div[class*='col']
        {
            border:solid 1px #000;
            height:100%;
          display: table-cell;
          float: none
        }
        .row
        {
            border:solid 1px #000;
            /* height:500px; */
          display: table;
          width: 100%

        }
Tushar
  • 4,280
  • 5
  • 24
  • 39
0

The solution that you are asking is not possible without some fixed reference height.

There are two alternatives that you can apply here:

  1. Create .col divs with fixed height and put overflow property auto so if content goes beyond your fixed height scrollbar will be visible here is jfiddle: http://jsfiddle.net/9FFgN/1/

  2. Use jquery to solve this problem

Hemant Gogia
  • 11
  • 1