粘性页脚不会停下来

Question

在页面上滚动时，我的页脚不会停下来。有提示吗？

页脚CSS：

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #f2f2f2;
  margin: 0;
  height: 150px;
  background-color: #399D60;
}

关于如何解决此问题的任何想法？

Answer 1

尝试position:sticky或position:aboslute;

Answer 2

如果您的html结构像下面这样：

<footer>
    <!-- Your footer content go here -->
</footer>

那么您的CSS应该是

footer {
 /* Your css should go here*/
 /* not .footer, use footer */
}

或者您可以给它一个类footer，以便可以使用.footer定位

<footer class="footer">
    <!-- Your footer content go here -->
</footer>

现在您可以使用类选择器（例如.footer

）来定位它

Answer 3

我实际上写了一篇文章，介绍如何制作适用于所有屏幕尺寸的简单的响应式粘性页脚。无需定位。您可以阅读它的工作原理，也可以复制代码使其适合您。

Responsive Sticky Footer Without Positioning

Answer 4

您的页脚不会不停留在您的位置，因为您设置了position: fixed;

尝试以下操作： position:relative;