div height fill rest of the white space - html

Question

I'm trying to make my orange div to get all of the white space in height. Im using 1920x1080 monitor. When i open bottom code in my page i have white space under red, blue and green div's. I wanna orange div to move my red, blue, green div's down and fill that white space under them.
The idea is site automatically to fill browser window without scrollbars.
I try to write 100% instead of 700px, but when my attribute is 100%, orange div disappear.
Can someone tell me why that is happening, where is my mistake, how can i prevent it.
Also is it there another way to give equal space to my red, blue and green div's? I calculate that 100% of page divided by 3 is 33.3333 in period. That's why i set my width to be 33.33% but it didn't fill page completely.
.wrapper{
position: relative;
}
.pink{
background-color: pink;
height: 100px; width: 100%;
position: relative;
}
.orange{
background-color: orange;
height: 700px; width: 100%;
position: relative;
margin: 0px 0px 0px 0px;
}
.red{
background-color: red;
height: 300px; width: 33.33%;
position: relative;
float: left;
}
.blue{
background-color: blue;
height: 300px; width: 33.33%;
position: relative;
float: left;
}
.green{
background-color: green;
height: 300px; width: 33.33%;
position: relative;
float: left;
}
<div class="wrapper">
<div class="pink"></div>
<div class="orange"></div>
<div class="red"></div><div class="blue"></div><div class="green"></div>
</div>

Answer 1

Give height:100% to parent div, body and html
body, html{
height:100%;
}
.wrapper{
position: relative;
height:100%;
}
.orange{
background-color: orange;
height: 100%; width: 100%;
position: relative;
margin: 0px 0px 0px 0px;
}
Please check this fiddle.

Answer 2

Is this what you mean?
I've made use of
display: table
display: table-row
display: table-cell
The orange div will now fill the remaining height of the window.
Fiddle
EDIT: I updated the fiddle. tidied the code a bit.

Answer 3

Include this in your style:
body{
margin:0;
padding:0;
}

Answer 4

Wrap orange and pink inside a separate div from last three and use display:flex; on that div.
You can make three div eualwidth by using display:flex to the parent div and flex:1 to the children divs. You don't necessarily have to use width:33.33%;
html,body{
width:100%;
height:100%;
margin:0;
padding:0;
}
.wrapper{
position: relative;
margin:0;
padding:0;
display:flex;
min-height:100vh;
flex-direction:column;
}
.pink{
background-color: pink;
height: 50px;
width: 100%;
position: relative;
flex-shrink:0;
}
.orange{
background-color: orange;
height:100%;
width: 100%;
position: relative;
margin: 0px 0px 0px 0px;
flex-shrink:0;
flex-grow:1;
}
.wrapper2{
position: relative;
margin:0;
padding:0;
flex-shrink:0;
width:100%;
height:100px;
display:flex;
flex-direction:row;
justify-content: space-between;
}
.red{
background-color: red;
height:100%;
position: relative;
float: left;
flex: 1;
}
.blue{
background-color: blue;
height:100%;
flex: 1; position: relative;
float: left;
}
.green{
background-color: green;
height:100%;
flex: 1; position: relative;
float: left;
}
<div class="wrapper">
<div class="pink"></div>
<div class="orange"></div>
<div class="wrapper2">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
</div>