CSS Выровнять верхнюю часть дочернего контейнера по нижней части родительского контейнера

#html #css

#HTML #css

Вопрос:

Рассмотрим этот 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.

Ответ №1:

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

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

Ответ №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>

Развернуть фрагмент