如何将两个全屏大小的 html 元素放在彼此之上

Question

我正在尝试在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%。然后，您可以向下滚动到"关于"部分。

Answer 1

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

修复后，您需要做的就是设置第一个div的高度，也许是正文的边距，如果您有某种css重置，则可能已经覆盖了。

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>

Answer 2

你应该使用class而不是className。className是JSX语法，而不是HTML。

至于根据视口保持每个div居中：设置要100vh的每个div的高度。为了演示，我在每个div周围添加了边框。

在这种情况下，height计算减去 5px 顶部边框和 5px 底部边框：

* {
margin: 0;
}
.intro {
height: calc(100vh - 10px);
border: 5px solid red;
}
.about {
height: calc(100vh - 10px);
border: 5px solid blue;
}

<div class="main">
<div class="intro">
Intro
</div>
<div class="about">
About
</div>
</div>

或者，您可以使用border-box来避免必须计算边框大小：

* {
margin: 0;
}
.intro {
height: 100vh;
border: 5px solid red;
box-sizing: border-box;
}
.about {
height: 100vh;
border: 5px solid blue;
box-sizing: border-box;
}

<div class="main">
<div class="intro">
Intro
</div>
<div class="about">
About
</div>
</div>

您也可以使用百分比来完成相同的操作，但此方法有一些注意事项。使用百分比，将根据父元素的大小来确定。在这种情况下，我将全局选择器*设置为高度为 100%，因此它将以相同的方式工作，但只是因为父元素是视口的 100%(或100vh)。

* {
margin: 0;
height: 100%;
}
.intro {
height: 100%;
border: 5px solid red;
box-sizing: border-box;
}
.about {
height: 100%;
border: 5px solid blue;
box-sizing: border-box;
}

<div class="main">
<div class="intro">
Intro
</div>
<div class="about">
About
</div>
</div>

如果将父元素从 100% 更改为 50%，您可以看到为什么vh是一个比百分比好得多的单位：

* {
margin: 0;
height: 50%;
}
.intro {
height: 100%;
border: 5px solid red;
box-sizing: border-box;
}
.about {
height: 100%;
border: 5px solid blue;
box-sizing: border-box;
}

<div class="main">
<div class="intro">
Intro
</div>
<div class="about">
About
</div>
</div>

Answer 3

height: 100vh和width: 100vw工作得很好。

* {
box-sizing: border-box;
}
body {
margin: 0;
}
.full-page {
height: 100vh;
width: 100vw;
padding: 20px;
}
.intro {
background: orange;
}
.about {
background: yellow;
}

<div class="main">
<div class="intro full-page">
<h2>Hello, world!</h2>
</div>
<div class="about full-page">
<h2>About page</h2>
</div>
</div>

Answer 4

您可以在 css 文件中使用此代码：

.intro, .about{height: 100vh;}