CSS Align top of child container to bottom of parent container

Question

Consider this HTML

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

What I want to do is position the top of child to the bottom of parent.

Here's my CSS so far:

.parent {
    position: relative;
}

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

What this achieves is this:

What I want to achieve is this:

Please note: I do not know the height of either the parent or child container, and don't really want to set an arbitrary height, and I don't want to revert to using JavaScript.

Answer 1

.parent {
    position: relative;
    background-color: #F00;
}

.child {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #00F;
}

Answer 2

You can do this with transform: translateY(100%)

The translateY() CSS function moves the element vertically on the plane. This transformation is characterized by a <length> defining how much it moves vertically.
translateY(ty) is a shortcut for translate(0, ty).

.parent {
    position: relative;
    background: red;
    width: 50%;
    height: 50vh;
}

.child {
    position: absolute;
    left: 0;
    bottom: 0;
    background: blue;
    height: 100px;
    width: 100px;
    transform: translateY(100%);
}

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