html - CSS Align top of child container to bottom of parent container -

consider html

<div class="parent">     <a href="#">parent</a>     <div class="child">         <a href="#">child</a>     </div> </div> 

what want position top of child bottom of parent.

here's css far:

.parent {     position: relative; }  .child {     position: absolute;     left: 0;     bottom: 0; } 

what achieves this:

what want achieve this:

please note: not know height of either parent or child container, , don't want set arbitrary height, , don't want revert using javascript.

.parent {     position: relative;     background-color: #f00; }  .child {     position: absolute;     top: 100%;     left: 0;     background-color: #00f; }