Responsive divs 50% height of viewport size - html

Question

I try to make a grid of four boxes each 50% height and 50% width of the full screen size, like shown in this picture:
http://a.pomf.se/gqnzzs.jpg
My problem is that I can't get the 50% height to work. How can I set the height of 2 div above each other at each a height of 50% of the viewport size?
HTML:
<div class="wrapper">
<div class="row">
<div class="panel-1">... </div>
<div class="panel-2">...</div>
</div>
<div class="row">
<div class="panel-3">...</div>
<div class="panel-4">...</div>
</div>
</div>
CSS:
.wrapper{
width: 100%;
height: 100%;
display: inline-block;}
.panel-1{
width: 50%;
float: left;
height: 50%;}
.panel-2{
width: 50%;
float: left;
height: 50%;}
.panel-3{
width: 50%;
float: left;
height: 50%;}
.panel-4{
width: 50%;
float: left;
height: 50%;}
I greatly appreciate any help!
Greets

Answer 1

In supported browsers, you can use viewport-percentages units, vh, vw, vmin, vmax.
In this case, just use 50vh, where 1 unit equals 1% of the height of the initial containing block.
Example Here
.panel-1, .panel-2,
.panel-3, .panel-4 {
height: 50vh;
width: 50%;
float: left;
}
For what it's worth, if you want to still use percentage based units, you would need to define all the parent element's heights too:
Updated Example
html, body, .wrapper {
height: 100%;
}
.row {
height: 50%;
}
.panel-1, .panel-2,
.panel-3, .panel-4 {
height: 100%;
width: 50%;
float: left;
}

Answer 2

Solved by flexbox. Caniuse
No float, no clearfixes - simple and clear;
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
background-color: #333;
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-o-box-orient: horizontal;
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-o-box-lines: multiple;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.flex__item {
display: -webkit-box;
display: -moz-box;
display: -webkit-flex;
display: -ms-flexbox;
display: box;
display: flex;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-o-box-flex: 1;
box-flex: 1;
-webkit-flex: 0 0 50%;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
height: 50%;
background-color: #777;
border: 1px solid #000;
}
.flex__item:nth-child(1) {
background-color: #9aa0a8;
}
.flex__item:nth-child(2) {
background-color: #a7c4b5;
}
.flex__item:nth-child(3) {
background-color: #a9d8b8;
}
.flex__item:nth-child(4) {
background-color: #beffc7;
}
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>

Answer 3

You need to set following:
html { height:100%; width:100%;}
body { width:100%;height:100%;}
Then "div" will work with "height:50%".