Set margin-top to a % of the parent element's height

http://stackoverflow.com/questions/24845090/set-margin-top-to-a-of-the-parent-elements-height

by Aaron Kahlhamer

HTML

<div>
    <p></p>
</div>

CSS

* {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

div {
    background-color:orange;
    height:100px;
    width:100px;
}

p {
    background-color:green;
    float:left;
    height:calc(100% / 4);
    margin-top:25%;
    width:50px;
}