html - 如何将此 设置为每个页面的底部中心？

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

问题是你的两个.title4元素占据您第一个 上方 的空间 <section> :

<h1 class="title4">WELCOME TO MY</h1>
<h1 class="title4">PORTFOLIO</h1>
<section></section>

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

只需将这两个元素移动到您的部分内，您的页脚插入符就会神奇地出现:)

要将插入符号向上(这样它就不会消失在页脚后面)，只需调整 bottom .next 的值:

.next {
    bottom: 35px;
}

请注意，通过将插入符的位置调整到底部来向上移动插入符会使其在该部分中更高。相反，最好调整部分的高度以在外部容纳页脚:

section {
  height:calc(100vh - 34px);
}

我创建了一个更新的 CodePen 来展示这个 here .

希望这对您有所帮助!