'CSS for Fixed Footer

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

htmlcss


Solution 1:[1]

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.

Solution 2:[2]

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.

Solution 3:[3]

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.

Solution 4:[4]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Lupus Ossorum
Solution 2 Community
Solution 3 Koushik Das
Solution 4 Matstar

Related Questions