新手上路，请多包涵

我有一个非常基本的 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>

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

谢谢

原文由 user687554 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css

阅读 347

2 个回答

得票最新

社区维基

发布于
2022-12-19

✓ 已被采纳

您需要 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>

原文由 Philipp Hofmann 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-19

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

http://jsfiddle.net/SUQuX/

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

原文由 GolezTrol 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Stack Overflow 翻译

子站问答

访问

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

相似问题

找不到问题？创建新问题

固定页脚的 CSS

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译