How to make a div occupy the available height?

Here is the solution:


HTML

<div class="container-fluid">
    <div class="row box">
    </div>
</div>


CSS

html, body {
    height: 100%;
    margin: 0px;  
}
.container-fluid {
    display: table;
    width: 100%;
    height: 100%;
}
.row {
    display: table-row;
    width: 100%;
}
.box {
    display: table-cell;
    background: grey;
   }