css - 低于 100vh 的 html 中的空白覆盖背景图像，导致滚动条

Question

在我的 React 元素中，我有一个用于登录页面的组件。类为“landing”的 section 元素是组件的顶级元素。我希望背景图像占据屏幕的整个宽度，它确实如此——但是，封面图像下方有空白区域，并且会出现一个滚动条。

设置 html { overflow-y: hidden } 消除了这个问题，但我不能这样做，因为它切断了其他确实需要滚动条的组件的内容。 (React Router 用于显示组件——要是有某种方法我可以在仅显示着陆组件路由时做到这一点就好了……)

当我打开 Chrome 开发工具并将鼠标悬停在空白处时，会突出显示两件事:首先(向上)div#root，下面是 html。

部分元素的 CSS:

.landing {
  /* center center is background-position, cover is background-size (see https://stackoverflow.com/questions/31558245/declaring-all-css-background-properties-in-one-line-especially-background-size) */
  /* bacground-position: 2-value syntax: one value defines X and the other defines Y. Default value is top left or 0% 0% */
  background: url('./img/showcase.jpg') no-repeat center center / cover;
  height: 100vh;
}

GitHub 存储库 here .着陆页组件代码 here .完整的 CSS here .

Answer 1

编辑:我从您的源代码构建了您的 React 网站。问题是你有 <section class="container"></section>在您的着陆区下。 .container应用了这些样式:

.container {
    max-width: 800px;
    margin: auto;
    overflow: hidden;
    padding: 0 2rem;
    margin-top: 6rem;
    margin-bottom: 3rem;
}

因此，它占用了一些高度并导致溢出。如果您不需要该部分，请将其删除，您的问题就解决了。如果您确实需要它，那么您需要使用我下面的答案来计算 .landing 的正确高度。 .

与 display: none;添加到 .container :

---

100vh 的高度等于视口(viewport)的 100%，不是剩余视口(viewport)，而是整个视口(viewport)。但是因为你有一个标题，你最终得到的总高度是标题 + 视口(viewport)，导致滚动条。

你可以做类似 height: calc(100vh - <height_of_header>); 的事情where 替换为 CSS 标题的实际高度。

* {
  margin: 0;
  padding: 0;
}

header {
  background: #777;
  height: 50px;
}

.landing {
  background: #999;
  height: calc(100vh - 50px);
}

<header>
  <h1>Header</h1>
</header>

<section class="landing">
  <p>This is the landing section</p>
</section>

还值得注意的是，如果 .landing 的内容超出视口(viewport)，如果您只使用 height，背景将不会随之扩展.在这种情况下，您需要使用 min-height 相反。