固定页脚的CSS

use*_*554 11 html css

我有一个非常基本的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>
Run Code Online (Sandbox Code Playgroud)

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

谢谢

Phi*_*ann 18

你需要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>
Run Code Online (Sandbox Code Playgroud)


Gol*_*rol 7

position: absolute将页脚更改为position: fixed.

http://jsfiddle.net/SUQuX/

为什么?这解释了它们的不同之处https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/我认为在你的情况下问题是absolute元素附着在身体上,因此它将与身体滚动.