在HTML和CSS中，如何将元素固定到容器的底部？
在HTML和CSS中，如何将元素固定到容器的底部？
提问于 2018-08-09 03:44:50
我试图使一个简单的投资组合网站，我希望在屏幕底部的两个标签，无论何时我导航向下或向上的页面。例如，如果我在页面顶部，它会显示我的名字和三个链接：“关于我”、“我的工作”和“联系人”。如果我点击“关于我”，它会将我导航到页面上我有那个部分的地方。然后这就是我需要帮助的地方，我想在底部的“我的工作”和“联系”，以便于导航。我已经尝试了几个小时来解决这个问题，这就是为什么我现在在这里问一个问题。我是网络编程的新手，所以请原谅。下面是我的一些相关代码。
#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>
回答 4
Stack Overflow用户
发布于 2018-08-09 04:09:56
你可以尝试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>
希望能有所帮助
Stack Overflow用户
发布于 2018-08-09 03:54:10
未经过测试，但您可以尝试一下。你需要一个带有"position:fixed“的元素，这样当滚动时它就会停留在屏幕上。
<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>Stack Overflow用户
发布于 2018-08-09 03:55:03
你应该看看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%)
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51754519
复制相关文章
相似问题
腾讯云开发者
