14

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

user687554
  • 9,625
  • 23
  • 69
  • 128

5 Answers5

20

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>
rand0rn
  • 618
  • 2
  • 9
  • 28
Philipp Hofmann
  • 3,242
  • 26
  • 31
7

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.

Lupus Ossorum
  • 440
  • 2
  • 16
GolezTrol
  • 111,943
  • 16
  • 178
  • 202
4

Use position: fixed instead of position: absolute.

<footer style="position: fixed;">

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.

Community
  • 1
  • 1
Praveen Kumar Purushothaman
  • 160,666
  • 24
  • 190
  • 242
0

I am writing this answer because I think it may help someone in the future. I am facing a problem even after defining the height of the footer and margin-bottom for the body. The problem is if you have responsive website where the height of the footer dynamically changes based on screen size, you will have content overlapping. To solve that, I have used jQuery - Keep every setting same except for margin-bottom for body and height of footer.

var footerHeight = $('#main_footer').outerHeight(); // get the footer height excluding margin
    $('#main_footer').css('height', footerHeight + "px");
    $('body').css('margin-bottom', footerHeight + 10 + "px");

This will always keep the footer at the bottom even when the footer height changes and there wil be no content over lapping.

Koushik Das
  • 7,573
  • 3
  • 39
  • 37
0

Using flexbox is an alternate way and works great with responsive page layout.

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100vh;
    margin: 0;
}

header {
    background-color: darkslategray;
    color: teal;
    padding: 0 15px;
}

section#main {
    flex: 1;
    overflow-y: auto;
    background-color: teal;
    color: aquamarine;
    padding: 0 15px;
}

footer {
    background-color: darkslategray;
    color: teal;
    padding: 5px 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" Paragraph="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="site.css">
</head>
<body>
    <header>
        <h1>
            Header
        </h1>
    </header>
    <section id="main">
        <h2>Section</h2>
        <p>Paragraph 1</p>
        <p>Paragraph 2</p>
        <p>Paragraph 3</p>
        <p>Paragraph 4</p>
        <p>Paragraph 5</p>
        <p>Paragraph 6</p>
        <p>Paragraph 7</p>
        <p>Paragraph 8</p>
        <p>Paragraph 9</p>
        <p>Paragraph 10</p>
        <p>Paragraph 11</p>
        <p>Paragraph 12</p>
        <p>Paragraph 13</p>
        <p>Paragraph 14</p>
        <p>Paragraph 15</p>
        <p>Paragraph 16</p>
        <p>Paragraph 17</p>
        <p>Paragraph 18</p>
        <p>Paragraph 19</p>
        <p>Paragraph 20</p>
    </section>
    <footer>
        Footer
    </footer>
</body>
</html>
Matstar
  • 402
  • 3
  • 6