CSS: Force a column to always have full height

Question

I have the following html :

<div style="height: 80px">
   ...
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 col1">...</div>
    <div class="col-xs-10 col2">...</div>
  </div>
</div>

Both my col1 and my col2 are currently having height: auto; However, my col2 is always gonna be bigger than my col1. I don't want my col2 to have a specific height. However, I would like my col1 to always be full height and so match whatever height col2 has.

How can I achieve this in css/sass ?

you can set fix height of column1 & column2 – Deep Shah Jun 28 '16 at 11:44 — Deep Shah, Jun 28 '16 at 11:44

score 6 · Answer 1 · answered Jun 28 '16 at 11:49

Yes you can do this using either flexbox or table:

.row.equal {
  display: table;
}
.row.equal .column {
  display: table-cell;
  
  /* Just for demo purposes */
  max-width: 5em;
  border: 1px solid #FFF;
  background-color: red;
}

.row.equal.flex {
  display: flex;
}
.row.equal.flex .column {
  /* Just for demo purposes */
  max-width: 5em;
  border: 1px solid #FFF;
  background-color: red;
}

<div class="row equal">
  <div class="column">
    Equal height column using the table property
  </div>
  <div class="column">
    Equal height
  </div>
</div>

<div class="row equal flex">
  <div class="column">
    Equal height column using the flex property
  </div>
  <div class="column">
    Equal height
  </div>
</div>

You should be pretty safe without using prefixes, but be sure to check out caniuse. Good luck

score 0 · Answer 2 · answered Jun 28 '16 at 11:47

use display:table-cell . it will make them same height.
also use vertical-align:top so the text will always be positioned at the top of the col

see here jsfiddle

css code :

.row {
  display:table;
}
.col1,.col2 { 
  display: table-cell;
  width:300px;
  veritcal-align:top;
}
.col1 { 
  background:red
}
.col2 { 
  background:blue;
  height:200px;
}

CSS: Force a column to always have full height

2 Answers2