defining height of a div to scale - html

Question

Is there any way to define the height of a div without it being fixed to that defined size? For example setting a div to 200px it will be locked to that, and so when it scales it wont change.
I know that you can use % but when I try to do this my image disappears so im forced to using units like px or vw, and im not sure how to create a fluid design without being locked into a specific set size.
Here is my code. I'm wanting .face background image to appear but by using a % it no matter how big I make it, it wont show the image. If I add a px or vw number to its container .topwrap it then creates a large gap to the div container .lowerwrap. So basically I'm trying to find a way to get the image to display itself in a correctly sized div that is able to scale to browser size.
/*----------------------------Top ----------------------------*/
.topwrap{
position:relative;
top:50px;
height:auto;
}
.face{
position:relative;
float:right;
background:url(../images/face2.png) no-repeat;
background-size:100%;
top:10%;
width:50%;
height:200%;
display: flex;
right:16%;
display: block;
min-width:160px;
}
.txtwrap{
position:absolute;
margin-top:1.3%;
font-size:1.3vw;
float:right;
right:39%;
text-align: center;
}
.sptxt{
color:#171717;
font-weight:bold;
}
.sptxt2{
color:#171717;
font-weight:400;
}
/*----------------------------Lower----------------------------*/
.lowerwrap{
position:relative;
float:left;
width:100%;
height:300px;
top:50px;
padding-top:10px;
display: flex;
box-shadow: 0px 10px #333 inset;
}
.contentwrap{
position:relative;
width:100%;
background:url(../images/content.png) no-repeat;
background-size:100%;
display: block;
z-index:1;
}
/*----------------------------Footer----------------------------*/
.footerwrap{
position:relative;
float:left;
width:100%;
background:#09C;
top:50px;
text-align:center;
}
.foottxt{
text-align: center;
font-family: 'Roboto', sans-serif;
font-size:0.5vw;
color:#FFFFFF;
font-weight:200;
z-index:300;
}

Answer 1

Since we cannot see the HTML that you are applying your styles to, it is difficult to provide a solution. Have you tried using the following on the .face class?
min-height: 200px;

Answer 2

If you want to allow a <div class="face"> element to resize fluidly based on that percentage width, but maintain a given aspect ratio, try replacing your .face rule set with this:
.face {
position:relative;
float:right;
background:url(../images/face2.png) no-repeat;
background-size:100%;
top:10%;
width:50%;
right:16%;
display: block;
min-width:160px;
}
.face:before {
display: block;
content: '';
padding-top: 100%;
}
The above code assumes face2.png's height and width are the same (a square image, or 1:1 aspect ratio). To make div.face fit your actual image, divide your image's height by its width in pixels, multiply that by 100%, and use that for .face:before's padding-top value. For example, if face2.png is 180px tall by 120px wide, use padding-top: 150%;.
See: http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/