如何解决CSS Flexbox / 在所有情况下都将页脚固定在页面底部
我在所有情况下都无法将页脚置于页面底部,或者在向上或向下滚动时它消失了,或者它只是显示在页面顶部...... 试图在这里找到但我无法得到它..
如果这篇文章与现有文章重复,我深表歉意..
body {
display: flex;
flex-direction: column;
}
footer {
background-color: rgba(255,255,0.9);
height: 25px;
order: 4;
border-top: 1px black solid;
margin-top: auto;
text-align: center;
}
<footer>
<span>Text of my footer</span>
</footer>
不确定 Grid 是否可以帮助解决这种情况并使生活更轻松?
感谢您的任何答复! :) Rgds, 埃里克
解决方法
您可以使用 position: fixed
并设置 bottom: 0px
body {
display: flex;
flex-direction: column;
}
footer {
background-color: rgba(255,255,0.9);
height: 25px;
order: 4;
border-top: 1px black solid;
margin-top: auto;
text-align: center;
position: fixed;
bottom: 0px;
}
<footer>
<span>Text of my footer</span>
</footer>
width: 100%
,
添加 position: fixed;
和 bottom: 0;
。
position
fixed
将位置设置为即使页面滚动也保持在同一位置。
body {
display: flex;
flex-direction: column;
}
footer {
background-color: rgba(255,0.9);
height: 25px;
order: 4;
border-top: 1px black solid;
margin-top: auto;
text-align: center;
position: fixed;
bottom: 0;
}
<footer>
<span>Text of my footer</span>
</footer>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。