在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 - 是當前視口的 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%; */
}

如果這沒有幫助 - 請制作問題的屏幕截圖。

Answer 2

我通過在移動設備上使用 height: -webkit-fill-available 而不是 height: 100vh 來解決這個問題。 但是你必須找到你必須設置的 div。 當你有更多的內部 div 時，這很棘手。