Javascript 无法正确设置粘性页脚

我正在学习Udemy上的一门课程的web开发，我遇到了一个问题。我似乎无法使页脚按我所希望的方式运行。问题是，当有更多的数据时，页脚开始在上面重叠，正如我在CSS中为它设置的位置：relative。但是，如果我删除该选项，如果页面未完全填充（例如登录页面），则页脚不会停留在页面底部，而是跳到登录表单的最低部分

我正在寻求建议/帮助，了解如何使页脚粘在页面底部，以及如何在页面充满数据并到达页脚边缘时将页脚保持在那里并被推压。 注意：我使用EJS进行此操作，并且有页眉和页脚部分

登录表单HTML：

请登录 用户名 暗语 登录

---

您没有定义页脚必须紧贴屏幕底部。尝试添加这个

.footer {
    bottom: 0;
}

如果您遇到其他内容现在被页脚覆盖的问题，只需在最后一个与页脚高度相等的div底部添加一些边距/填充。

使用position:fixed来定义粘性位置，并设置bottom:0来定义您想要的位置

试试这个

.表格签名{ 宽度：100%； 最大宽度：330px； 填充：15px； 保证金：自动； } .表格签名.复选框{ 字体大小：400； } .表格签名.表格控制{ 位置：相对位置； 框大小：边框框； 高度：自动； 填充：10px； 字体大小：16px； } .表单签名.表单控件：焦点{ z指数：2； } .form signin输入[类型=文本]{ 边缘底部：-1px； 边框右下半径：0； 边框左下半径：0； } .form signin输入[类型=密码]{ 边缘底部：10px； 边框左上半径：0； 边框右上角半径：0； } html， 身体{ 身高：100%； 保证金：0； 填充：0； } .网页内容{ 最小高度：100%！重要； 填充：0-60px！重要； 位置：相对位置； } 页脚推送{ 高度：60px！重要； 位置：绝对！重要； 明确：两者皆有； } .container.text静音{ 利润率：20px0； } 页脚{位置：固定；底部：0；文本对齐：中心；宽度：100%；背景：fff；} 请登录 用户名 暗语 登录 Yelp营地 0 { %> 0 { %>

&副本：YelpCamp 2018 |

---

您是否有fiddle或codepen演示程序？您的代码段不起作用，请编辑并运行到目前为止，我正在VSCode上进行此操作。但我将尝试为此设置一个codepen演示程序，如果它以相同的方式工作。@Justcode抱歉，代码段是我从ejs插入代码的唯一方式，如果我使用其他方法，则无法工作。我是t的初学者他说，现在还不确定如何从ejs中更改它以使其在代码段中运行。我将尝试发布我面临的问题的屏幕截图，希望您提供解决方案。问题是，如果我使用posigion:fixed，页脚在页面上始终可见。我希望它在内容之后保持在底部，即使re的内容不足，无法填满整个页面。另一件事我无法理解的是我的页脚为什么会缩小。页脚的高度设置为60像素，但显示为19像素左右。然后你必须设置页边距以将内容与页脚分开，但如果我设置了固定的页边距大小，那么如果页面的内容超出视图的范围，我必须滚动向下，在内容的结尾和页脚之间将有一个如此大小的间隙。这看起来不像是一个适合所有屏幕大小的流体设计。然后设置高度将是唯一的选项