移动端HTML溢出问题

Question

移动端HTML溢出问题

3

我在移动设备上遇到了视差效果的问题。实际上，整个页面的大小似乎大于100vh（并且还出现了侧边的滚动条）。如果我将overflow-y从auto更改为hidden，它可以解决问题，但是还会切掉页面的一部分。在桌面上不会出现这种情况。有人可以帮我吗？

屏幕截图： https://imgur.com/a/n9wMmqN

.selector-for-some-widget {
  box-sizing: content-box;
}

header .carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  background-color: white;
  font-family: 'Open Sans', sans-serif;
  min-height: 100%;
}

.wrapper {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 75px);
  transform-style: preserve-3d;
  z-index: -1;
}

.background {
  transform: translateZ(-10px) scale(2.5);
}

.background {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}

.title {
  font-family: 'Montez', cursive;
  color: white;
  text-align: center;
}

section {
  background-color: white;
}

.navbar {
  height: 75px;
  font-size: 1.25rem;
  letter-spacing: 3px;
  font-weight: bold;
}

.navbar-brand {
  font-size: 1.75rem;
  letter-spacing: 10px;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <!-- Bootstrap Icon CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
  <!-- Style CSS -->
  <link rel="stylesheet" href="css/styles.css">
  <title>Ariano Francesco Photography</title>
</head>

<body>
  <div class="wrapper">
    <header>
      <div id="carouselExampleControls" class="carousel slide background" data-bs-ride="carousel">
        <div class="carousel-inner">
          <div class="carousel-item active" style="background-image: url('img/carousel_1.jpg')">
          </div>
          <div class="carousel-item" style="background-image: url('img/carousel_2.jpg')">
          </div>
        </div>
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
      <div class="title">
        <h1>Ariano Francesco</h1>
        <h2>Photography</h2>
      </div>
    </header>
    <section>
      <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm">
        <div class="container px-5">
          <a class="navbar-brand" href="#">AFR</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
            aria-controls="offcanvasNavbar">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar"
            aria-labelledby="offcanvasNavbarLabel">
            <div class="offcanvas-header justify-content-end">
              <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
                aria-label="Close"></button>
            </div>
            <div class="offcanvas-body d-flex text-center align-items-center">
              <ul class="navbar-nav justify-content-end flex-grow-1">
                <li class="nav-item ms-2">
                  <a class="nav-link active" aria-current="page" href="index.html">Gallery</a>
                </li>
                <li class="nav-item ms-2">
                  <a class="nav-link" href="contact.html">Contact</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </nav>
      <div class="container px-5">
        <div class="text-center mt-5">
          <h2 class="fw-bold fade-in">Gallery</h2>
        </div>
        <div class="row mt-5">
          <div class="col-lg-4 col-md-12">
            <a href="img/_IMG1556.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
              <img src="img/_IMG1556.jpg" class="img-fluid rounded mb-4">
            </a>
            <a href="img/_IMG1594.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
              <img src="img/_IMG1594.jpg" class="img-fluid rounded mb-4">
            </a>
          </div>
          <div class="col-lg-4">
            <a href="img/_IMG1491.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
              <img src="img/_IMG1491.jpg" class="img-fluid rounded mb-4">
            </a>
            <a href="img/_IMG1558.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
              <img src="img/_IMG1558.jpg" class="img-fluid rounded mb-4">
            </a>
          </div>
          <div class="col-lg-4">
            <a href="img/_IMG74c91.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
              <img src="img/_IMG74c91.jpg" class="img-fluid rounded mb-4">
            </a>
            <a href="img/_IMG1510.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
              <img src="img/_IMG1510.jpg" class="img-fluid rounded mb-4">
            </a>
          </div>
        </div>
      </div>
      <footer class="text-center text-muted">
        <div class="container px-5">
          <div class="mb-4 border-bottom">
            <a class="btn btn-floating m-3" href="https://instagram.com/_afr.photo" role="button"><i
                class="bi bi-facebook"></i></a>
            <a class="btn btn-floating m-3" href="https://www.facebook.com/ArianoFrancescoPH" role="button"><i
                class="bi bi-instagram"></i></a>
          </div>
          <div class="mb-4">
            <h6 class="text-uppercase fw-bold mb-4">
              Contact
            </h6>
            <p>
              Castagnole delle Lanze, AT
            </p>
            <p>
              franci.ariano@gmail.com
            </p>
            <p>
              339 2350792
            </p>
          </div>
        </div>
        <div class="p-4" style="background-color: rgba(0, 0, 0, 0.05);">
          © 2022 Copyright:
          <a class="text-reset fw-bold" href="www.afr.altervista.org">Ariano Francesco Photography</a>
        </div>
      </footer>
    </section>
  </div>
  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>
  <!-- Lightbox for Bootstrap 5 -->
  <script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.7.11/dist/index.bundle.min.js"></script>
  <!-- Script.js -->
  <script src="js/script.js"></script>
</body>

</html>

- Arianoxx

问题出在哪里？您需要附上屏幕截图。 - Priya jain

看起来你的代码片段没有问题。不管怎样，我通常会将整个页面包装在一个新的<div>中，并将overflow: hidden设置为该元素来解决这个问题。 - Jonas Grumann

@Priya Jain，这就是它。第一个问题发生在您正常向下滚动时。然后有时会出现滚动条纸张以显示更多内容。如果您想查看，我也已经上传了它 https://afr.altervista.org。 - Arianoxx

@Arianoxx 这个工作正常。你的代码片段和截图没有问题。如果你仍然遇到问题，请在截图上标记问题。 - Priya jain

@Priya jain 是的，从电脑上看它运行得很好，但是用手机试试，你会注意到一开始你看不到像在电脑上那样的导航栏，然后在页面底部，部分页脚被隐藏了，你需要向下滚动。就像整个页面都距离顶部-75px，但这只发生在移动设备上。这里还有一个视频，可以更好地展示：https://imgur.com/a/LhHQyCE - Arianoxx

2个回答

1

看这个回答：https://css-tricks.com/the-trick-to-viewport-units-on-mobile/。

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>

- Priya jain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Priya jain · Accepted Answer

使用纯CSS解决移动设备上的100vh问题

有时候，使用vh单位的目的只是为了创建与视口高度相等的部分。比如，当你构建落地页时，这种情况很常见。在这些情况下，position sticky并不能帮助你，我想介绍一下fill-available属性。它很容易使用，只需要记得使用前缀和回退值：

.layout {
  min-height: 100vh;            /* fall-back */
  min-height: -moz-available;
  min-height: -webkit-fill-available;
  min-height: fill-available;
}

就是这么简单！