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>