html - 如何在 HTML 和 CSS 中将元素固定到容器底部？

Question

我正在尝试制作一个简单的投资组合网站，每当我向下或向上导航页面时，我都希望在屏幕底部有两个标签。因此，例如，如果我在页面顶部，它会用三个链接显示我的名字，“关于我”、“我的工作”和“联系方式”。如果我点击“关于我”，它会将我导航到页面下方的那个部分。那么这就是我需要帮助的地方，我想要底部的“我的工作”和“联系方式”以便于导航。几个小时以来，我一直在努力解决这个问题，这就是为什么我现在在这里问一个问题。我是网络编程的新手，所以请原谅。这是我的一些相关代码。

#container {
  padding-top: 100vh;
  width: 100%;
  height: 100vh;
  color: white;
}

#container div {
  position: relative;
  width: 100%;
  height: 100%;
}


/* Styling for each indivual link (About Me, My Work, Contact) */
#container div#AboutMe {
  background: white;
  color: black;
  font-family: Helvetica;
  font-weight: lighter;
  text-align: center;
  font-size: 21px;
}

#AboutMe p { 
 padding-right: 60%;
 padding-left: 10%;
 padding-top: 5%;
}

.animatedButtonBody span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.animatedButtonBody span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.animatedButtonBody:hover span {
  padding-right: 25px;
}

.animatedButtonBody:hover span:after {
  opacity: 1;
  right: 0;
}

<div id="container">
  <div id="AboutMe">
    <h1>About Me</h1>
    <p>
     This is where some text will go.
    </p>
    <a href="#MyWork" class="animatedButtonBody"><span>My Work</span></a>
    <a href="#Contact" class="animatedButtonBody"><span>Contact</span></a>
  </div>
</div>

Answer 1

你可以试试position:fixed。你还应该整理你的 html 元素(将东西包装在 div 等中)

例子:

.nav {
  height: 60px;
  background-color: grey;
}

.content{
  height: 500px;
  background-color: lightgreen;
} 

.footer{
  height: 60px;
  width: 100%;
  background-color: black;
  position: fixed;
  bottom: 0px;
}

<div class = "container">
  <div class = "nav">
  </div>
  <div class="content"> 
  </div>
  <div class = "footer"> 
  </div>
</div>

希望对你有帮助