页脚位于视差不正确的位置

Question

我正在尝试创建视差，但是在使用任何js创建真正的“视差”之前，我正在尝试将页脚定位在底部，因此如下所示。为什么会发生这种情况，我该如何解决它只能在CSS中使用？对不起，如果图像不清楚！

但是页脚以一种奇怪的方式出现：

这是我的CSS和HTML。

.about {
  height: 300vh;
  display: flex;
}

.about-title {
  width: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.about-pages {
  width: 50%;
}

.about-pages div {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.about-pages div>p {
  width: 80%;
  font-size: 18px;
  line-height: 30px;
}

.about-pages div:nth-child(1) {
  background-color: lemonchiffon
}

.about-pages div:nth-child(2) {
  background-color: powderblue
}

.about-pages div:nth-child(3) {
  background-color: lavender
}

.about-pages div:nth-child(4) {
  background-color: moccasin
}

footer {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: mediumaquamarine
}

<header>
  <h1> Go-Out-To-Eat. Simplest way to enjoy.</h1>
</header>
<section class="about">
  <div class="about-title">
    <h2> All you can eat, cheaper and faster. </h2>
  </div>
  <div class="about-pages">
    <div>
      <h2> Page 1 </h2>
      <p> Random Text Generated. </p>
    </div>
    <div>
      <h3> Page 2 </h3>
      <p> Random Text Generated. </p>
    </div>
    <div>
      <h3> Page 3 </h3>
      <p> Random Text Generated. </p>
    </div>
    <div>
      <h3> Page 4 </h3>
      <p> Random Text Generated. </p>
    </div>
  </div>
</section>

<footer>
  <h2> Contact now, Tel) 1234567 </h2>
</footer>

Answer 1

这与声明.about的{​​{1}}类有关。

页脚不能再降低了，因此必须与300vh重叠。我还更改了div和页脚的高度，以便您可以更好地查看摘要。无需更改任何CSS并删除Page 4，它也可以解决您的问题。

确保您运行代码段到整页以查看实际结果。

Page 4

.about {
  display: flex;
}

.about-title {
  width: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.about-pages {
  width: 50%;
}

.about-pages div {
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.about-pages div>p {
  width: 50%;
  font-size: 18px;
  line-height: 30px;
}

.about-pages div:nth-child(1) {
  background-color: lemonchiffon
}

.about-pages div:nth-child(2) {
  background-color: powderblue
}

.about-pages div:nth-child(3) {
  background-color: lavender
}

.about-pages div:nth-child(4) {
  background-color: moccasin
}

footer {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-content: center;
  background-color: mediumaquamarine
}