Inner div's height not adjusting when viewport gets smaller - css

Question

I have a div that inside another div whose background is that of a phone. I am trying to make the inner div to resize as the viewport gets smaller.
You can see a demo here
HTML
<div class="phone-container">
<div class="screen">
</div>
</div>
CSS
.phone-container {
position: relative;
background: url(http://imgur.com/eyIzwSW.jpg) no-repeat;
background-size: contain;
width: 25.188em;
height: 50em;
max-width: 90%;
}
.screen {
position: absolute;
left: 8.1%;
top: 15.1%;
width: 82.5%;
height: 65.1%;
background-color: green;
overflow: hidden;
}
When the viewport is a normal size, it works out fine and if one were to incrementally decrease the size of the viewport, the inner div's width adjusts properly but the height stays the same. Any suggestions on how I can make the inner div's height respond properly without the use of JavaScript?

Answer 1

Percentage top is based on the height of the element's parent. In your case, the parent's height doesn't change when you resize the window, so the child's top won't change either. See the documentation for top.
I had success using a different structure, letting the image define the height of .phone-container:
<div class="phone-container">
<img src="http://imgur.com/eyIzwSW.jpg" />
<div class="screen"></div>
</div>
.phone-container {
position: relative;
width: 90%;
max-width:552px;
}
.phone-container img {
position:relative;
width:100%;
}
.screen {
position: absolute;
left: 8.1%;
top: 15.1%;
width: 82.5%;
height: 65.1%;
background-color: green;
}
The screen's position relative to the image is not pixel perfect, but you can probably tweak the values to get it more accurate.
Working Example (jsFiddle)

Answer 2

You've specified the inner div's height as a percentage, which means it's set as a percentage of the height of the window. If you're "resizing the viewport" by changing the browser window width, that won't change the height.

Answer 3

If you still want to use a <div> instead of an <img>, there is a trick to keep the aspect-ratio of the <div>:
LIVE DEMO
HTML:
<div class="phone-container">
<div class="aspect-ratio-container">
<div class="dummy"></div>
<div class="screen"></div>
</div>
</div>
CSS:
.phone-container {
position: relative;
background: url(http://imgur.com/eyIzwSW.jpg) no-repeat;
background-size: contain;
width: 25.188em;
height: 50em;
max-width: 90%;
}
.aspect-ratio-container {
display: inline-block;
position: relative;
width: 90.5%;
}
.dummy {
padding-top: 176%;
}
.screen {
position: absolute;
top: 18.5%;
bottom: 0;
left: 9%;
right: 0;
background-color: green;
}