视口变化时如何对计算的位置/容器高度进行动画处理？

Question

我的布局将按钮粘在屏幕底部。目前它是用flexbox完成的（内容是flex 1，按钮具有固定高度）。

问题出在移动浏览器上，我使用 dvh 作为外部容器，这样即使有浏览器栏，它也会粘在底部。

在 Android chrome 上，滚动条会隐藏（即使页面上没有滚动🤔），视口会更改尺寸，按钮会跳转到底部。我想平滑这种过渡，但不知道如何处理此类运动的动画。

（也欢迎提供其他解决此问题的方法）

Answer 1

为了确保当您滚动或更改屏幕大小时（例如当这些栏在手机上弹出或消失时）顺利移动，您可以混合使用 CSS 过渡和 JavaScript。这段代码应该可以解决问题。

HTML：

<div id="container">
  <div id="content">Main Content</div>
  <button id="button">Button</button>
</div>

CSS：

html, body {
  margin: 0;
}

#container {
  position: relative;
  height: 100vh; /* Initial height */
  transition: height 0.5s ease; /* Smooth transition for height */
}

#content {
    text-align: center;
    font-size: 2rem;
}

#button {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 45px;
}

/* Add additional styling as needed */

JavaScript：

window.addEventListener('resize', function() {
  // Calculate new container height based on viewport size
  var newHeight = window.innerHeight;
  
  // Apply the new height to the container
  document.getElementById('container').style.height = newHeight + 'px';
});

希望这对您有帮助。