修复了滚动时移动设备上元素高度问题/跳转

Question

滚动时，我的移动设备底部的固定元素有问题。每次滚动时，看起来高度都会重新计算，因为在移动设备上文档高度会增加。

我认为原因是地址栏淡出并且文档视口变大了。我进行了很多搜索，尝试了不同的解决方案，例如将height: 100%设置为html和body，但没有成功。

这是GIF，显示我在chrome浏览器中手机上的页面上滚动。顶部透明的是地址栏：

这是我的实际代码：

#wrapper {
  position: fixed;
  background: darkcyan;
  color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  top: calc(100% - 100px);
  width: 100%;
}

#bottom-element {
  height: 50px;
  position: fixed;
  background: black;
  display: block;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
}

#title {
  text-align: center;
  padding: 15px;
  height: 20px;
  border-bottom: 1px solid white;
}

#entries {
  display: flex;
  flex-direction: column;
      overflow: scroll;
    overflow-x: hidden;
}

.entry {
  padding: 15px;
  background: cadetblue;
}

<div id="wrapper">
  <div id="title"></div>
  <div id="entries">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
</div>
<div id="bottom-element"></div>

该想法是使div从屏幕的底部向上扩展到80%。那我该如何解决这个问题呢？我正在动态更改最高值以扩展我的元素，因此，如果有任何可以保留我的布局的解决方案，将会很好。

Answer 1

问题是最高价值是计算。我已经修改了您上一个问题的答案中的代码，以使其以不同的方式完成（总是以不同的方式实现同​​一件事）。

此示例使用高度动画而不是最高值。底部设置在包装器上，因此无论页面高度如何，它都会自行定位。然后在需要时根据需要调整高度

const title = document.getElementById("title");
const wrapper = document.getElementById("wrapper");

title.addEventListener("click", () => {
   wrapper.classList.toggle("expanded"); 
});

#wrapper {
  position: fixed;
  background: gray;
  color: #fff;
  bottom: 42px;
  left: 0;
  right: 0;
  border-radius: 12px 12px 0 0;
  width: 100%;
  transition: height 250ms ease-in-out;
  height: 42px;
}

#wrapper.expanded {
    height: 85vh;
}

#title {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid white;
}

#notifications {
  display: flex;
  flex-direction: column;
      overflow: scroll;
    overflow-x: hidden;
}

.entry {
  padding: 15px;
}

<div id="wrapper">
  <div id="title">Notifications</div>
  <div id="notifications">
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
    <div class="entry">Test</div>
  </div>
</div>