时间戳

首页 > 解决方案 > 如何将两个全屏大小的html元素放在一起

html - 如何将两个全屏大小的html元素放在一起

问题描述

我试图在 html/css 中堆叠两个全屏大小的元素。到目前为止，我有以下 html 代码

  <div className="main">
    <div className="intro">
      <div className="intro__header">
        Hello, world!
      </div>
    </div>
    <div className="about">
    </div>
  </div>

我想让“介绍”部分位于“关于”部分的顶部。（这将允许您在部分之间向后滚动和第四次滚动）“介绍”和“关于”部分都将占据整个屏幕的大小。例如，如果屏幕是 900 像素 x 900 像素，则两个部分将是 900 像素 x 900 像素，并且彼此重叠。

到目前为止，我的“介绍”部分使用以下 css 占据了 100% 的屏幕。

.intro {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  margin: 0;
}

我如何让“关于”部分也占据屏幕的 100% 但位于“介绍”部分下方

---------------
| intro       |
|             |
|_____________|
---------------
| about       |
|             |
|_____________|

当您访问页面时，输出将是上面的“介绍”部分是屏幕的 100%。然后您可以向下滚动到“关于”部分。

标签： htmlcss

解决方案

您需要使用属性class，而不是className.

修复之后，你需要做的就是设置第一个 div 的高度，也许还有 body 的边距，如果你有某种css reset ，它可能已经被覆盖了。

100vh是一个方便使用的值。您可以使用100%，但这与容器相关，因此您必须设置.main主体的高度或高度。100vh仅表示视口的高度：

.intro {
  height: 100vh;
}
<div class="main">
  <div class="intro">
    <div class="intro__header">
      Hello, world!
    </div>
  </div>
  <div class="about">About section
  </div>
</div>

推荐阅读