Question

我是响应式开发的新手，不知道如何在互联网上看到它。

我有三个div容器

<div className={styles.mainContainer}>
  <div className={styles.blackContainer}>
    ... Black background
  </div>
  <div className={styles.greyContainer}>
    ... Grey background
  </div>
</div>

关于CSS：

.mainContainer {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.blackContainer {
  width: 55vw;
  height: 100vh;
}

.greyContainer {
  width: 45vw;
  height: 100vh;
}

@media (max-width: 500px) {
  .mainContainer {
    flex-direction: column;
  }
  
  .blackContainer {
    height: 26.5vh;
    width: 100vw;
  }

  .grayContainer {
    height: 80vh;
    width: 100vw;
    position: absolute;
    bottom: 0;
    z-index: 1;
    border-radius: 50px 50px 0 0;
  }

}

Image in Mobile

Image in Desktop

使用NextJS时可以看到预览。在台式机上还可以，但是当我在Chrome移动浏览器中打开它（无论是iPad还是手机）时，都可以向下滚动，如何避免向下滚动？在Chrome中我的检查元素的宽度和高度中，mainContainer的大小与屏幕中的大小相同。（即，如果我使用的是iPhone X，则mainContainer的尺寸为375 x 812

Answer 1

通过在正文中添加overflow-y: hidden可以阻止向下滚动看一下：https://www.w3schools.com/css/css_overflow.asp

如何使用vh和vw固定响应式网页的高度

1 个答案: