防止绝对 Div 离开屏幕？

Question

如果我有一个绝对定位的 HTML 对象

top: 50vh;

然后使浏览器窗口变得非常薄，对象的底部将从底部开始离开屏幕，因为对象从屏幕的中心线开始。有没有办法让我可以做到，如果对象的底部接触到屏幕的底部，它会开始向上推动以停留在屏幕上？

对象示例： https://jsfiddle.net/p0uow75r/

编辑：调试细节

要明白我的意思，请使浏览器窗口非常细，直到绿色方块从屏幕的白色部分消失。我想要发生的是，一旦绿色触及底部，它就会随着用户继续使窗口变薄而开始向上推。

Answer 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>