如何让粘性页脚工作？

Posted 2023-03-21

【中文标题】如何让粘性页脚工作？

【英文标题】：How to get the sticky footer to work?

【发布时间】：2015-02-15 17:28:34

【问题描述】：

我正在试图弄清楚如何让页脚在http://bit.ly/138xOAB 的 css 中粘在页面底部

我尝试了很多教程中所说的东西，例如：

绝对位置， 底部：0， 容器的最小高度为 100%， 身高100%，

但结果都不是很好。

您可以通过检查网站来查看 html 和 CSS。我在这里找不到正确的代码。

谁能帮帮我，也许 HTML 有问题？

【问题讨论】：

You can see the HTML and CSS by inspecting the website. I can't get the proper code over here. 您可以随时从元素检查器中复制相关代码。或者右键->查看源码..

有这么多sticky footer posts...

从您的页脚中删除位置：绝对。或者，如果您希望始终显示页脚，请根据需要使用 position:fixed 和适当的边距/填充

【参考方案1】：

您的页脚position: absolute; 的问题在于它会将其他元素隐藏在其后面。

如果您删除 position: absolute; 以显示所有元素并添加 margin-top: 20px; 以在页脚和它之前的元素之间留出一些间隙，则可以最好地查看您的页脚。

试试看。

编辑：

如果您希望页脚始终浮动在屏幕上，请使用以下 CSS (cmets inline)：

.container 
  max-width: 1200px;
  margin: auto;
  padding: 0px 3%;
  margin-bottom: 250px; /* so that all content is visible */


.footer 
  background: #efefef;
  position: fixed; /* so that the footer floats */
  overflow: auto;
  bottom: 0px; /* float at bottom */
  padding-top: 20px;
  padding-bottom: 20px;
  height: 180px;
  width: 100%;
  margin-top: 20px;

【讨论】：

谢谢，我试过了，但内容后它仍然不会浮在底部。

@HugOnline 请参阅上面我的回答中的编辑。

感谢拉胡尔的帮助！问题是，我希望它位于页面底部，而不是屏幕底部。你能帮我吗？

@HugOnline 我的第一个解决方案只是为了这个。 :)

@HugOnline 如果您还有任何问题，请告诉我。如果您认为此答案解决了您的问题，请将其标记为已接受。

【参考方案2】：

从 .footer 类中删除“位置：绝对”和“底部：0”。我认为这可以解决您的问题。并在页脚上方添加一个小边距，以便内容和页脚之间有一个小空间。

【讨论】：

谢谢，但是当您查看其他页面（例如注册）时，您会看到页脚浮动而不是向下推。