我想在页面上添加一个粘性页脚，粘在页面底部，它确实做到了，但如果页面内容较长并且我需要向下滚动，则页脚会保留在可见页面的底部，覆盖内容，如果我滚动，内容就会从页脚下方出现。 我已经多次询问 ChatGPT，但每次它都给了我一个不适合我的解决方案。我也会在下面添加它。
这是代码： HTML
<footer class="footer">
hi
</footer>
CSS
.footer {
background-color: #4f2e61;
padding: 5px 30px;
color: #f2f2fc;
position: fixed;
width: 100%;
text-align: left;
margin-right: 5em;
left: 0;
bottom: 0;
}
ChatGPT 的代码：
HTML
<body>
<div class="content">
...
</div>
<footer class="footer">
...
</footer>
</body>
CSS
body {
min-height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
感谢您的帮助！
对于你编写 CSS 的方式来说，将其设置为一个位置会很容易
absoluteCSS
.footer {
background-color: #4f2e61;
padding: 5px 30px;
color: #f2f2fc;
position: absolute;
width: 100%;
text-align: left;
margin-right: 5em;
left: 0;
bottom: 0;
}
如果
不起作用，请尝试absoluterelative