HTML/CSS 中的粘滞页脚，显示问题

Posted 2023-03-21

【中文标题】HTML/CSS 中的粘滞页脚，显示问题

【英文标题】：Sticky footer in HTML/CSS, display issues

【发布时间】：2016-07-08 11:10:40

【问题描述】：

我正在开发一个网站，并试图将页脚放在底部，因为许多页面的长度不足以将页脚推到底部。

我已经应用了这种技术：http://mystrd.at/modern-clean-css-sticky-footer/

我的页面可以在这里查看：https://jsfiddle.net/cgLf0oLa/

我认为这个 CSS 输入非常重要：

html    
    position: relative;
    min-height: 100%;

body    
    margin: 0 0 400px;

但是，我遇到了麻烦。页脚被呈现在其他内容之上，我不知道如何使其适应内容大小。 非常感谢您的帮助。

亲切的问候，

克莱门斯

【问题讨论】：

我在 Chrome、Edge 和 Mozilla 的小提琴链接中看到底部的#footer，哪个浏览器给您带来问题？

@spaniard 如果您将浏览器调整到较低的高度，这是错误的。绝对位置告诉因此将元素从通常的对象流中移出并设置在其他内容上。

@callmeniko 我已将浏览器调整为最小尺寸，页脚仍在底部...

@spaniard 如果我理解正确，他会尝试制作一个 STICKY 页脚，如果它具有绝对位置，则它不能是 STICKY，你知道我的意思吗？

不，我不知道，他希望页脚始终位于底部，与粘性不同。

【参考方案1】：

尝试将高度等于页脚高度的:after 添加到页脚上方的包装器中。它在页脚下方留下空白区域，将页脚推到底部。