javascript - 在 android 中使用 chrome 的移动设备中，当我向下滚动模式并且地址栏消失时，底部出现空白

Question

function openModal() {
  document.getElementById("my-modal").style.display = "block";
  document.querySelector("nav").style.display = "none";
  document.querySelector("body").style.overflow = "hidden";
}
function closeModal() {
  document.getElementById("my-modal").style.display = "none";
  document.querySelector("nav").style.display = "block";
  document.querySelector("body").style.overflow = "auto";
}

html {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  overflow-y: scroll;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  margin-top: 55px;
  border-radius: 4px;
  padding: 24px;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  max-width: 1000px;
  border: none;
  background-color: #fff;
  height: max-content;
  margin-bottom: 50px;
  box-sizing: border-box;
}

.my-slides {
  width: 100%;
}

.my-slides img {
  width: 100%;
}

.closed {
  position: fixed;
  top: 30px;
  right: 25px;
  font-size: 48px;
  font-weight: bold;
  transition: 0.3s ease;
}

.closed:hover,
.closed:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.prev {
  cursor: pointer;
  position: fixed;
  top: 50%;
  left: 8%;
  width: auto;
  padding: 16px;
  color: #fff !important;
  font-weight: bold;
  font-size: 3em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

.next {
  cursor: pointer;
  position: fixed;
  top: 50%;
  right: 8%;
  width: auto;
  padding: 16px;
  color: #fff !important;
  font-weight: bold;
  font-size: 3em;
  transition: 0.6s ease;
  user-select: none;
  -webkit-user-select: none;
  border-radius: 3px 0 0 3px;
}


/* Media queries */

@media (min-width: 768px) and (max-width: 992px) {
  .prev {
    left: 7%;
  }
  .next {
    right: 7%;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .prev {
    display: none;
  }
  .next {
    display: none;
  }
  .modal-content {
    margin-left: 10px;
    width: 80%;
  }
}

@media (min-width: 0px) and (max-width: 575px) {
  .prev {
    display: none;
  }
  .next {
    display: none;
  }
  .modal-content {
    margin-left: 10px;
    width: 80%;
  }
}

<div id="my-modal" class="modal">
  <!-- close button -->
  <span class="closed" onclick="closeModal()">
        <img
          data-src="img/close-left-product-ui-ux-design-cover.webp"
          style="width: 24px; height: 24px;"
          alt="close button"
          class="img-fluid lazyload"
        />
      </span>
  <!-- content for modal -->
  <div class="modal-content">
    <!-- Images for modal -->
    <div class="my-slides">
      <!-- <div class="numbertext">1/15</div> -->
      <img data-src="img/ecolight-product-ui-ux-design-full@3x.webp" class="img-fluid lazyload" alt="ecolight product" />
    </div>
    <div class="my-slides">
      <!-- <div class="numbertext">1/15</div> -->
      <img data-src="img/demo-product-ui-ux-design-cover-full@3x.webp" class="img-fluid lazyload" alt="demo product" />
    </div>
  </div>
  <!-- Next and previous buttons -->
  <a class="prev" onclick="changeSlides(-1)">
    <img data-src="img/left-product-ui-ux-design-cover.webp" style="width: 40px; height: 40px;" class="img-fluid lazyload" alt="previous button" />
  </a>
  <a class="next" onclick="changeSlides(1)">
    <img data-src="img/right-product-ui-ux-design-cover.webp" class="img-fluid lazyload" style="width: 40px; height: 40px;" alt="next button" />
  </a>
</div>

在 android 中使用 chrome 的移动设备中，当我向下滚动模式并且地址栏消失时，底部出现空白。任何其他浏览器都不会发生这种情况，例如 mozilla firefox、android 中的 mi 浏览器。就在地址栏消失时，空白出现。

这是我遇到的问题的屏幕截图。

红色边框的是我在chrome android中滚动时出现的空白

Answer 1

我认为在某些移动浏览器上 100vh 不是一个小问题。 100vh - 是当前视口(viewport)的 100%(您可以在屏幕上看到的所有内容)。有时，当您上下滚动时，它在移动浏览器上有点不稳定，并且由于导航栏/地址栏的隐藏/出现，浏览器的高度会动态变化。

尝试更改以下设置

body {
  min-height: 100%; /* on your example link it is 100hv, make it 100% */
}
.modal {
  min-height: 100%; /* the element is fixed, it will work hike whith 100%; */
}

如果这没有帮助 - 请制作问题的屏幕截图。