How to create two rows that occupy the full viewport height

css, twitter-bootstrap-3

Solution

An easy way is adding the needed height to the rows

html,
body {
    height: 100%;
}

.viewport {
    height: 100%;
}

.thick {
    height: 60%;
    color: white;
    background-color: #800;
}

.thin {
    height: 40%;
    color: white;
    background-color: #080;
}

<div class="container viewport">
    <div class="row thick">
        <div class="col-xs-12">Hello</div>
    </div>
    <div class="row thin">
        <div class="col-xs-12">world</div>
    </div>
</div>

Problem

I am using Bootstrap 3 and what to create a layout where it occupies the full viewport both horizontally and vertically. I have two rows. The first at 60% of the height of the viewport and the second 40% of the viewport. So basically with some ASCII art: ``` ---------------------------- | 60% Of View Port Height | | | ---------------------------- | 40% Of View Port Height | ---------------------------- ``` I have looked at various posts on Stack Overflow but cannot find a solution that will work across all devices in a responsive fashion. I would prefer a native Bootstrap 3 solution but other solutions also welcome.

Original source