Предотвратить отключение Absolute Div от экрана?
Если у меня есть объект HTML с абсолютным позиционированием с
top: 50vh;
но затем сделайте окно браузера действительно тонким, нижняя часть объекта будет выходить за пределы экрана, начиная с нижней части, поскольку объект начинается с центральной линии экрана. Есть ли способ сделать так, чтобы если нижняя часть объекта касалась нижней части экрана, она начинала толкаться вверх, чтобы оставаться на экране?
Пример объекта: https://jsfiddle.net/p0uow75r/
Обновлено: Детали отладки
Чтобы понять, что я имею в виду, сделайте окно браузера очень тонким, пока зеленый квадрат не исчезнет с белой части экрана. Я хочу, чтобы, как только зеленый цвет коснется нижней части, он начал подниматься вверх, поскольку пользователь продолжает делать окно тоньше.
Ответы 1
Вы можете использовать функцию min() для условного рендеринга, подобного этому.
Внизу страницы будет top: calc(100vh - 100px)
Если 50vh поместит элемент за пределы экрана, то 100vh - 100px приведет к меньшему значению. Поэтому мы можем использовать min(), чтобы поместить элемент внизу, если он будет за пределами экрана.
.middle-right {
position: absolute;
top: min(100vh - 100px, 50vh);
right: 30px;
width: 100px;
height: 100px;
background-color: green;
}<div class = "middle-right">
</div>
По какой-то причине я думал, что вы не можете использовать условия для абсолютных значений. Понятия не имею почему. Спасибо!