Previously, I believed that setting the height of a parent element in % was impossible if none of its children had a set height, even if one child had a static height and was stretching the parent. However, I recently discovered that a child with position absolute can have a % height. Why is it that a position absolute child can have a % height while a block, inline, or floated child cannot? http://jsfiddle.net/4vmeqf16/
body > div{
background: black;
}
div div:nth-child(1){
width: 50px;
height: 50px;
background: red;
}
div div:nth-child(2){
width: 20%;
height: 20%;
background: green;
}
div div:nth-child(3){
width: 20%;
height: 20%;
position: absolute;
background: yellow;
}
<div>
<div></div>
<div></div>
<div></div>
</div>