render height via absolute positioning

When an element is position absolute, and its parent is position relative, if the parents height is set, the childs height and positioning within vertically can be established via top and bottom values. top bottom left and right are the offsets for the outermost points of the childs marginal boundaries within its parent

by fezec

HTML

<div id="parent">
    <div id="child"></div>

</div>

CSS

#child{

    padding:0;
    border:0;
    margin:0;
    position:absolute;
    background:green;
    
    top:10%;         
    bottom:10%;
    right:20%;
    left:0;
}



div#parent{
    position:relative;
    background:red;
    border:1px solid transparent;
    padding:0;
    margin:0;
    height:100px;

}