如何在 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

您可以尝试位置：固定。你也应该整理你的 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>

希望对你有帮助

Answer 2

我找到了问题的答案。这是我添加到标签中的内容。

#pinButton1 {
    position: absolute;
    bottom: 0;
    transform:translateX(-100%)
}
#pinButton2 {
    position: absolute;
    bottom: 0;
    transform:translateX(0%)
}

<a href="#AboutMe" class="animatedButtonBody" id="pinButton1"><span>About Me</span></a>
			<a href="#Contact" class="animatedButtonBody" id="pinButton2"><span>Contact</span></a>

Answer 3

未测试，但您可以尝试。您需要一个带有“位置：固定”的元素，这样它在滚动时会停留在屏幕上。

 <style>
        .float-container {
            position: absolute;
            bottom: 0;
        }
        .about-me {
            position:fixed;
        }
    </style>    
    <div class="float-container>
        <div class="about-me">
            <p>Some Content</p>
        </div>
    </div>

Answer 4

您应该查看position:fixed 和position:absolute。

W3Schools 链接：HERE

您没有阐明“底部”是什么意思，因此我举了两个例子。我就是这样理解你的问题的。

如果您需要按钮始终位于屏幕底部的视口中，请使用此示例和自定义值。这里有一个示例，如何将项目置于视口底部中心。

#example{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%)
}

如果您需要将项目放在页面底部，请使用

#example{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%)
}