CSS: Force a column to always have full height
10,786
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
Comments
-
Scipion almost 2 years
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 havingheight: auto;
However, mycol2
is always gonna be bigger than mycol1
. I don't want mycol2
to have a specific height. However, I would like mycol1
to always be full height and so match whatever heightcol2
has.How can I achieve this in css/sass ?