Menu
I have a pretty basic HTML page. The code looks like the following:
<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>
Usually, my body text is fairly large. The text is large enough that a scroll bar is required. It looks like the footer sits on top of the text towards the bottom. Then, when I scroll down, the footer doesn't stay fixed. What am I doing wrong?
Thank you
706
Keep the footer at the bottom by using Flexbox Make sure that you are wrapping everything but the footer element in a <div> or any other block-level element. Make sure that you using <footer> or any other block-level element to wrap the footer.
A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.
You need position:fixed; in your footer:
<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>
Change position: absolute of the footer to position: fixed.
http://jsfiddle.net/SUQuX/
Why? This explains how they differ https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ I think in your case the problem is that the absolute element is attaching to the body, thus it will scroll with the body.
40
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
