时间戳

首页 > 解决方案 > 如何在 HTML 和 CSS 中将元素固定到容器的底部？

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

问题描述

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

#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>

标签： htmlcss

解决方案

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

希望能帮助到你

推荐阅读