网页窗口缩放时底部导航元素平滑上移问题求助

这是窗口正常尺寸下的显示效果：

这是窗口缩放后的显示效果：

我希望在用户缩放网页窗口时，这两个底部元素（Support和Setting）能平滑地向上移动。我曾尝试在上方元素和底部元素之间添加额外元素，但仍未解决问题。

我知道可以使用@media规则，但它无法实现平滑移动效果。请问还有其他方法可以实现吗？

当前代码 #

CSS #

.nav-bar {
  background-color: #e4e8ea;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: -20px;
  width: 75px;
  height: 840px;
  z-index: 101;
}

.nav-bar-top {
  height: 380px;
}

.nav-bar-top-button {
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  cursor: pointer;
}

.nav-bar-top-button div {
  font-family: Multiround Pro;
}

.pop {
  font-size: 13px;
}

.fav {
  font-size: 11px;
}

.recently {
  font-size: 13px;
}

.home-button {
  background: url('/Images/home-page.png') no-repeat;
  background-size: 28px;
  background-position: 35px 20px;
  padding-top: 60px;
  font-size: 15px;
  padding-left: 27px;
  transition: background 0.5s;
  height: 90px;
  width: 75px;
}

.pop-button {
  background: url('/Images/popular-button.png') no-repeat;
  background-size: 28px;
  background-position: 27px 20px;
  padding-top: 60px;
  font-size: 15px;
  padding-left: 9px;
  transition: background 0.5s;
  height: 90px;
  width: 75px;
}

.fav-button {
  background: url('/Images/favourite-1.png') no-repeat;
  background-size: 28px;
  background-position: 24px 20px;
  padding-top: 60px;
  font-size: 15px;
  padding-left: 3px;
  transition: background 0.5s;
  height: 90px;
  width: 75px;
}

.recently-viewed-button {
  background: url('/Images/recently-viewed-1.png') no-repeat;
  background-size: 28px;
  background-position: 24px 13px;
  padding-top: 51px;
  font-size: 15px;
  transition: background 0.5s;
  height: 90px;
  width: 75px;
  text-align: center;
}

.nav-bar-middle {
  flex: 1;
  max-height: 10px;
  display: flex;
  align-items: center;
}

.nav-bar-bottom {
  height: 200px;
  width: 75px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-bar-bottom-button {
  height: 90px;
  width: 75px;
  cursor: pointer;
}

.nav-bar-bottom div {
  font-family: Multiround Pro;
}

.support-button {
  font-size: 14px;
}

.support-button,
.setting-button {
  padding-top: 40px;
}

.support-button {
  background: url('/Images/support-1.png') no-repeat;
  background-size: 28px;
  background-position: 24px 20px;
  padding: 60px 0px 0px 4px;
  transition: background 0.5s;
  height: 90px;
  width: 75px;
}

.setting-button {
  background: url('/Images/settings.png') no-repeat;
  background-size: 28px;
  background-position: 24px 20px;
  padding: 60px 0px 0px 4px;
  transition: background 0.5s;
  height: 90px;
  width: 75px;
}

HTML #

<nav class="nav-bar">
  <div class="nav-bar-top">
    <div class="nav-bar-top-button">
      <div class="home-button" title="Home">
        <div>Home</div>
      </div>
    </div>
    <div class="nav-bar-top-button">
      <div class="pop-button">
        <div class="pop">Popular</div>
      </div>
    </div>
    <div class="nav-bar-top-button">
      <div class="fav-button">
        <div class="fav">Favourites</div>
      </div>
    </div>
    <div class="nav-bar-top-button">
      <div class="recently-viewed-button">
        <div class="recently">Recently viewed</div>
      </div>
    </div>
  </div>
  <div class="nav-bar-middle">
    <div></div>
  </div>
  <div class="nav-bar-bottom">
    <div class="nav-bar-bottom-button">
      <div class="support-button">Support</div>
    </div>
    <div class="nav-bar-bottom-button">
      <div class="setting-button">Setting</div>
    </div>
  </div>
</nav>

问题根源是导航栏用了固定高度840px，无法随窗口高度变化，导致底部元素无法平滑移动。只需调整几个CSS属性即可解决：

1. 让导航栏适配视口高度：将.nav-bar的height: 840px改为height: 100vh，同时移除margin-top: -20px（避免导航栏超出视口顶部，若需要偏移可按需调整）。
2. 保护顶部按钮区域不被压缩：将.nav-bar-top的height: 380px改为min-height: 380px，确保顶部按钮组不会因视口过小而被挤压变形。
3. 释放中间区域的收缩限制：删掉.nav-bar-middle的max-height: 10px，让它能自由收缩，配合justify-content: space-between实现底部元素的平滑移动。

修改后的核心CSS代码：

.nav-bar {
  background-color: #e4e8ea;
  position: fixed;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 75px;
  height: 100vh; /* 改为视口高度 */
  z-index: 101;
}

.nav-bar-top {
  min-height: 380px; /* 改为最小高度 */
}

.nav-bar-middle {
  flex: 1;
  display: flex;
  align-items: center;
}

调整后，窗口缩放时导航栏会自动适配视口高度，justify-content: space-between会让顶部和底部元素分别贴紧导航栏上下端，中间空白区域平滑收缩，底部的Support和Setting按钮也就会跟着平滑向上移动，完全不需要@media规则。

内容的提问来源于stack exchange，提问作者Strong