Footer not sticking to bottom of page when scrolling

Question

I'm coding a webpage that should have a header on top, a footer on bottom, and a side column on the right side. I'm having trouble with getting the footer to be on the bottom of the page. I don't want it to be position: fixed (that'd get annoying), but I do want it to appear at the bottom of the page when you scroll all the way down. (In the case that no scrolling is needed, it should appear at the bottom of the window)

Here's what I'm using. There's probably a pretty simple fix but I don't see what it is. Copy/paste this and you'll see.

<html>
  <head>
    <style type="text/css">
      body {
        font-size: 200%;
      }

      #side {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #0A0;
        z-index: 100;
      }

      #header {
        height: 40px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #A00;
        z-index: 200;
      }

      #header_push {
        clear: both;
        height: 40px;
      }

      #footer {
        height: 50px;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #00A;
        z-index: 150;
      }

      #footer_push {
        clear: both;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="header">
      HEADER
    </div>
    <div id="header_push"></div>
    <div id="content">
      <h1>Content</h1>
      <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
    </div>
    <div id="side">
      SIDE COLUMN
    </div>
    <div id="footer_push"></div>
    <div id="footer">
      FOOTER
    </div>
  </body>

Working correctly:

working correctly

Working incorrectly when scrolling down (see scrollbar on side of page):

working incorrectly with scroll

[Example](http://jsbin.com/educat/1/edit), see [this](http://stackoverflow.com/a/12255692/1763929). — Vucko, Jul 27 '13 at 20:25

score 5 · Answer 1 · answered Jun 28 '18 at 06:46

5

You need change the position to fixed

answered Jun 28 '18 at 06:46

Alex Montoya

3,115
19
19

Yes, finally. Thanks, this did the trick! – Mark May 20 '21 at 13:52

Vucko · Answer 2 · 2013-07-27T20:37:31.137

3

See my comment for an example of how to do this.

But in you situation, just put position:relative on the body.

JSBin

Them the absolute position footer will be in the relative positioned parent and will use its space, so putting bottom:0 will put the footer on the bottom of its _parent.

Some examples of elements with different positions

edited Jul 27 '13 at 20:37

answered Jul 27 '13 at 20:31

Vucko

18,882
6
54
97

This is a possible solution. It makes sense because this collides with the behavior of an element with css rule `position:absolute` inside an element with css rule `position:relative` – Braza Apr 04 '16 at 22:31

score 0 · Answer 3 · answered Jul 27 '13 at 20:21

Hey i made a fiddle using your code. from what i understand this is what you're looking for. let me know if this helps.

Changes done: CSS

#footer {
    height: 50px;
    background-color: #00A;
    z-index: 150;
  }

Link to fiddle : http://jsfiddle.net/daltonpereira/q7Dqg/

Naveen Kumar Alone · Accepted Answer · 2013-07-27T20:33:52.807

-2

Here is JSBIN

Please modify your CSS as below

#footer {
  height: 50px;
  position: absolute;
  left: 0;
  right: 0;
  background-color: #00A;
  z-index: 150;
}

Remove bottom: 0; from #footer{..}

edited Jul 27 '13 at 20:33

answered Jul 27 '13 at 20:25

Naveen Kumar Alone

7,142
5
32
50

If you remove the contents it won't stick to bottom – Maximus May 21 '15 at 16:01
I also facing the same problem but this solution isn't helping my problem :( – Emerald Mar 23 '16 at 01:50
This is not solving the problem - Possible Solution with Vucko answer – Braza Apr 04 '16 at 22:29

Footer not sticking to bottom of page when scrolling

4 Answers4