如何解决页脚不在底部,而是在页眉下方
- 它会粘在主页的底部,但不会粘在其他页面上。
- 我在所有页面上都使用版块,主页上总共有 5 个版块,其他页面上各有 1 个版块。
- 我是编码初学者,所以请帮我解决这个问题。
- 点击 here 查看有问题的视频
.copyright p{
margin: 0;
font-size: 15px;
}
.copyright{
padding: 100px;
color: white;
}
.footlogo{
padding: 20px;
width: 300px;
cursor: pointer;
align-items: center;
}
.navfoot{
padding: 20px;
display: flex;
position: relative;
justify-content: center;
}
.foot-btn{
display: inline;
padding: 10px;
color: white;
text-underline-position: 3px;
transition: 0.2s;
}
.foot-btn:hover{
color: #a200ff;
transform: translateY(-5px);
transition: 0.2s;
}
footer{
position: relative;
bottom: 0;
width: 100%;
color: white;
text-align: center;
background: #171724;
max-height: 10cm;
align-content: center;
overflow: hidden;
}
.call{
display: inline;
justify-content: space-around;
}
<footer>
<div class="call">
<div class="copyright">
<img src="Images/Banner.png" class="footlogo">
<p><span>©</span> Copyright 2021 proudly created by Darshan Daiv</p>
<div class="navfoot">
<a href="Website.html" class="foot-btn">Home</a>
<a href="Alphamesh.html" class="foot-btn">Alphamesh</a>
<a href="Aboutme.html" class="foot-btn">About Me</a>
<a href="Portfolio.html" class="foot-btn">Portfolio</a>
<a href="Contact.html" class="foot-btn">Contact</a>
</div>
</div>
</div>
</footer>
解决方法
您可以在 min-height
标签上使用 <html>
,并使用 <footer>
定位 position:absolute
;
html {
position: relative;
min-height: 100%;
}
.copyright p{
margin: 0;
font-size: 15px;
}
.copyright{
padding: 100px;
color: white;
}
.footlogo{
padding: 20px;
width: 300px;
cursor: pointer;
align-items: center;
}
.navfoot{
padding: 20px;
display: flex;
position: relative;
justify-content: center;
}
.foot-btn{
display: inline;
padding: 10px;
color: white;
text-underline-position: 3px;
transition: 0.2s;
}
.foot-btn:hover{
color: #a200ff;
transform: translateY(-5px);
transition: 0.2s;
}
footer{
position: absolute;
bottom: 0;
width: 100%;
color: white;
text-align: center;
background: #171724;
max-height: 10cm;
align-content: center;
overflow: hidden;
}
.call{
display: inline;
justify-content: space-around;
}
<footer>
<div class="call">
<div class="copyright">
<img src="Images/Banner.png" class="footlogo">
<p><span>©</span> Copyright 2021 proudly created by Darshan Daiv</p>
<div class="navfoot">
<a href="Website.html" class="foot-btn">Home</a>
<a href="Alphamesh.html" class="foot-btn">Alphamesh</a>
<a href="Aboutme.html" class="foot-btn">About Me</a>
<a href="Portfolio.html" class="foot-btn">Portfolio</a>
<a href="Contact.html" class="foot-btn">Contact</a>
</div>
</div>
</div>
</footer>
我会像您使用 max-height 那样坚持使用像素而不是厘米。
如果你先把你的body设置为height:100%;像这样:
body{
height:100%;
{
,然后您可以将页脚设置为(例如) 20px 。然后你可以添加一个最小高度 calc(100vh - 10px)。
.footer{
min-height: calc(100vh - 20px);
}
此链接解释了很多,并为您提供了其他选项: https://css-tricks.com/couple-takes-sticky-footer/
,您可以在页脚上使用 position: absolute
并稍微减小其宽度。请注意,此定位将使元素的父级无法计算该元素(例如,其高度不会改变)。代码:
.copyright p{
margin: 0;
font-size: 15px;
}
.copyright{
padding: 100px;
color: white;
}
.footlogo{
padding: 20px;
width: 300px;
cursor: pointer;
align-items: center;
}
.navfoot{
padding: 20px;
display: flex;
position: relative;
justify-content: center;
}
.foot-btn{
display: inline;
padding: 10px;
color: white;
text-underline-position: 3px;
transition: 0.2s;
}
.foot-btn:hover{
color: #a200ff;
transform: translateY(-5px);
transition: 0.2s;
}
footer{
box-sizing: border-box;
position: absolute;
bottom: 0;
width: calc(100% - 20px);
color: white;
text-align: center;
background: #171724;
max-height: 10cm;
align-content: center;
overflow: hidden;
}
.call{
display: inline;
justify-content: space-around;
}
<footer>
<div class="call">
<div class="copyright">
<!--Removed the image because it was using space-->
<p><span>©</span> Copyright 2021 proudly created by Darshan Daiv</p>
<div class="navfoot">
<a href="Website.html" class="foot-btn">Home</a>
<a href="Alphamesh.html" class="foot-btn">Alphamesh</a>
<a href="Aboutme.html" class="foot-btn">About Me</a>
<a href="Portfolio.html" class="foot-btn">Portfolio</a>
<a href="Contact.html" class="foot-btn">Contact</a>
</div>
</div>
</div>
</footer>
footer
应该定位为 fixed
而不是 relative
页脚的位置应该是“固定的”并尝试 margin-top: auto;也是
.copyright p{
margin: 0;
font-size: 15px;
}
.copyright{
padding: 100px;
color: white;
}
.footlogo{
padding: 20px;
width: 300px;
cursor: pointer;
align-items: center;
}
.navfoot{
padding: 20px;
display: flex;
position: relative;
justify-content: center;
}
.foot-btn{
display: inline;
padding: 10px;
color: white;
text-underline-position: 3px;
transition: 0.2s;
}
.foot-btn:hover{
color: #a200ff;
transform: translateY(-5px);
transition: 0.2s;
}
footer{
position: fixed;
margin-top:auto;
bottom: 0;
width: 100%;
color: white;
text-align: center;
background: #171724;
max-height: 10cm;
align-content: center;
overflow: hidden;
}
.call{
display: inline;
justify-content: space-around;
}
<footer>
<div class="call">
<div class="copyright">
<img src="Images/Banner.png" class="footlogo">
<p><span>©</span> Copyright 2021 proudly created by Darshan Daiv</p>
<div class="navfoot">
<a href="Website.html" class="foot-btn">Home</a>
<a href="Alphamesh.html" class="foot-btn">Alphamesh</a>
<a href="Aboutme.html" class="foot-btn">About Me</a>
<a href="Portfolio.html" class="foot-btn">Portfolio</a>
<a href="Contact.html" class="foot-btn">Contact</a>
</div>
</div>
</div>
</footer>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。