我有一个非常基本的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)
position: absolute将页脚更改为position: fixed.
为什么?这解释了它们的不同之处https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/我认为在你的情况下问题是absolute元素附着在身体上,因此它将与身体滚动.