CSS for Fixed Footer

css, html

Solution

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>

Problem

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

Original source