Question

我希望箭头位于我网页上方页脚的底部中心，但我不想向下滚动查看它。我认为问题是背景图片的长度？结果，这就是我必须向下滚动才能看到箭头的原因？这是example我想要它的样子。这是我的website。在我的网站上向下滚动以查看箭头。抱歉结构只是我的第二天编程。

我必须向下滚动才能看到第一页上我不想要的箭头，我希望它位于中心的页脚之上。

这是HTML编码。

<div id="page"></div>
  <section class="one">

<div class="next"><</div>
  </section>
  <section class="two">

<div class="next"><</div>
  </section>
  <section class="three">

    <div class="next"><</div>
      </section>
      <section class="four">
    <div class="next"><</div>
      </section>
  <section class="one">
    <div></div>
  </section>
</div>

这是CSS。

body {
  margin:0;
}
#page {
  position:absolute;
  top:0;
  left:0;
  right:0;
}
section {
  height:100vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
section > div {
  font-family:Georgia,Sans-serif;
  font-weight:bold;
  font-size:96px;
  color:#FFF;
  text-align:center;
}

.next {
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-40px;
  transform:rotate(-90deg);
  cursor:pointer;
}

.one {
   background-color: #45CCFF;
}
.two {
  background-color: #49E83E;
}
.three {
  background-color: #EDDE05;
}
.four {
  background-color: #E84B30;

亲切的问候，

小连

Answer 1

问题是您的背景图片大小。

Answer 2

问题是，您的两个.title4元素占据上面的空间<{1}}：

<section>

您的部分的高度为100vh，并且您希望在中包含所有元素。

只需将这两个元素移到您的部分内，您的页脚插入符将神奇地显示：）

要将您的插入符号向上移动（以便它不会在页脚后面消失），只需调整<h1 class="title4">WELCOME TO MY</h1> <h1 class="title4">PORTFOLIO</h1> <section></section>的{{1}}值：

bottom

请注意，通过将插入位置调整到底部来移动插入符将使其更高。相反，最好调整部分的高度以适应外部的页脚：

.next

我已经创建了一个更新的CodePen，展示了这个here。

希望这有帮助！

如何将此<div>设置为每页的底部中心？

2 个答案: