javascript - Chrome 移动设备上的视图高度

Question

我有一个弹出窗口，那是一个 div。它不应该超出屏幕，所以我添加了另一个可滚动的 div，以便在内容长于屏幕高度时提供便利。我可以像这样在javascript中设置内部div的最大高度（因为我之前有内容，所以我不知道它从哪里开始。）：

var rect = container.getBoundingClientRect();
container.style.maxHeight = "calc(100vh - " + rect.top + "px - 15vh)";

这种方法适用于计算机，但在 Chrome 中的智能手机上，viewheight 比用户实际看到的要多，因为 url bar 占用空间，所以当显示该栏时，div 的末尾超出了屏幕。那么如何使 div 从屏幕的实际底部结束“15vh”。

我的代码：

var container = document.getElementById("container");
var rect = container.getBoundingClientRect();
container.style.maxHeight = "calc(100vh - " + rect.top + "px - 15vh)";

body {
  background-color: black; 
}
#popup_content {
  position: relative;
  margin: auto;
  background-color: red;
  width: 80%;
  max-width: 500px;
}
#container {
  overflow: auto;
  max-height: 50vh;
}

<div id="popup_content">
  <p>some content</p>
  <div id="container">
    A lot of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, est vel congue eleifend, ante tortor ultricies leo, eu consectetur magna odio ac nibh. Nulla laoreet odio dui, ac aliquet purus porttitor et. Aliquam blandit vestibulum mauris, vel eleifend diam ultrices in. Vivamus eget eleifend dui. Cras aliquet libero et lorem venenatis ultricies. Vestibulum pulvinar erat eget velit porta, a gravida nunc scelerisque. Aliquam ut varius nibh. Aenean volutpat imperdiet nibh quis vestibulum. Donec eget magna varius, tempus augue ac, auctor ipsum. Vivamus quis egestas mauris. Vivamus dapibus risus hendrerit viverra ullamcorper. Pellentesque sodales elementum leo, sit amet ultricies elit rhoncus eu. Phasellus consectetur sit amet sem at mattis. Aliquam finibus risus ut ante pharetra, ut condimentum ligula convallis. Maecenas hendrerit, ligula at finibus pellentesque, justo ante varius metus, a luctus libero dui ut risus. Pellentesque dictum, risus ut fermentum tincidunt, purus massa dictum lectus, id aliquam neque risus at augue. Phasellus laoreet fermentum elementum. Donec sit amet aliquam neque. In consequat nec augue aliquam congue. Suspendisse purus neque, luctus vel placerat sed, pellentesque eget neque. Morbi tincidunt iaculis neque in imperdiet. Donec id tortor nunc. In lacinia rhoncus lectus, vitae feugiat felis egestas at.
  </div>
</div>

标签： javascriptjqueryhtmlcss