Question

我有一个非常基本的HTML页面。代码如下所示：

<body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: absolute; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>

通常，我的正文是相当大的。文本足够大，需要滚动条。看起来页脚位于文本顶部的底部。然后，当我向下滚动时，页脚不会保持固定。我做错了什么？

谢谢

Answer 1

您的页脚需要position:fixed;：

<body>
  <header style="min-height: 255px;">
  </header>

  <article style="padding-bottom: 60px; width: 900px; margin: 0 auto;">
    Body text goes here.
  </article>

  <footer style="position: fixed; bottom: 0px; width: 100%; height: 60px; background-color: black;">
    Copyright information
  </footer>
</body>

Answer 2

将页脚的position: absolute更改为position: fixed。

http://jsfiddle.net/SUQuX/

为什么呢？这解释了它们的区别https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/我认为在你的情况下问题是absolute元素附着在身体上，因此它将与身体一起滚动。

Answer 3

使用`position: fixed`代替`position: absolute`。

<footer style="position: fixed;">

为什么呢？这解释了它们的区别https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/我认为在你的情况下，问题是绝对元素附着在身体上，因此它会随身体滚动。

Answer 4

我正在写这个答案，因为我觉得它可能会对将来有所帮助。即使在定义了页脚的height和身体的margin-bottom之后，我也遇到了问题。问题是，如果您有响应式网站，其中页脚的高度根据屏幕大小动态更改，您将有内容重叠。为了解决这个问题，我使用了jQuery - 保持每个设置都相同，但margin-bottom和body页脚的height除外。

var footerHeight = $('#main_footer').outerHeight(); // get the footer height excluding margin
    $('#main_footer').css('height', footerHeight + "px");
    $('body').css('margin-bottom', footerHeight + 10 + "px");

即使页脚高度发生变化，也会始终将页脚保持在底部，并且不会有内容覆盖。

固定页脚的CSS

4 个答案:

使用`position: fixed`代替`position: absolute`。

固定页脚的CSS

4 个答案:

使用position: fixed代替position: absolute。

使用`position: fixed`代替`position: absolute`。