固定页脚的CSS

一尘不染

固定页脚的CSS

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>

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

谢谢

阅读 359

2020-05-16

共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>

2020-05-16