如何使粘性页脚工作？

Question

我试图找出如何在http://bit.ly/138xOAB

的CSS中让页脚粘到页面底部

我已经尝试了很多教程中所说的内容，例如：

• 绝对位置，
• 底部：0，
• 和容器的最小高度100％，
• 身体高度100％，

但这些事情都不是很好。

您可以通过检查网站来查看HTML和CSS。我无法在这里获得正确的代码。

有人可以帮助我，也许HTML中有问题吗？

Answer 1

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

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

试试吧。

修改

如果您希望页脚始终在屏幕上浮动，请使用以下CSS（注释内联）：

.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;
}

Answer 2

删除＆＃34;位置：绝对＆＃34;和＆＃34;底部：0＆＃34;来自.footer课程。我认为这可以解决您的问题。并在页脚上方添加一个小边距，以便在内容和页脚之间留出一个小空间。