How to set height of top row in bootstrap grid?

Question

I have a container which I want to split in two horizontal rows using a bootstrap grid.

The top row should take up 80% of the height, and the bottom the remaining.

<div class="container-fluid">
    <div class="row" style="height:80%">
        <div class="col-xs-12">This should take up 80% of the height</div>
    </div>

    <div class="row">
        <div class="col-xs-12">This should take up the remaining 20% of the height</div>
    </div>
</div>

I tried to add height:80% as inline style to the first row, but it did not have any effect.

What am I missing here?

Answer 1

set

body, html, .container-fluid {
     height: 100%;
}

an example: http://jsfiddle.net/wqkLodb6/