CSS将子容器的顶部对齐到父容器的底部

Question

考虑这个HTML

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

我想要做的是将顶部child置于底部parent.

到目前为止这是我的CSS:

.parent {
    position: relative;
}

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

这实现了这个:

我想要实现的是:

请注意:我不知道父容器或子容器的高度,也不想设置任意高度,我也不想恢复使用JavaScript.

Answer 1

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

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

Answer 2

你可以这样做transform: translateY(100%)

TranslateY () CSS 函数在平面上垂直移动元素。这种变换的特点是<length>定义它垂直移动的程度。
translateY(ty)是 的快捷方式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>