Footer not sticking to bottom of page when scrolling

Asked 27/7, 2013 at 20:16 Answered 28/6, 2018 at 6:46

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

Aberdeen answered 27/7, 2013 at 20:16 Comment(2)

share ur jsfiddle link? – As 27/7, 2013 at 20:20

Example, see this. – Storehouse 27/7, 2013 at 20:25

-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{..}

Impignorate answered 27/7, 2013 at 20:25 Comment(3)

If you remove the contents it won't stick to bottom – Latricialatrina 21/5, 2015 at 16:1

I also facing the same problem but this solution isn't helping my problem :( – Cowardly 23/3, 2016 at 1:50

This is not solving the problem - Possible Solution with Vucko answer – Teetotalism 4/4, 2016 at 22:29

You need change the position to fixed

Aerothermodynamics answered 28/6, 2018 at 6:46 Comment(1)

Yes, finally. Thanks, this did the trick! – Buller 20/5, 2021 at 13:52

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

Storehouse answered 27/7, 2013 at 20:31 Comment(1)

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 – Teetotalism 4/4, 2016 at 22:31

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/

Wimbush answered 27/7, 2013 at 20:21 Comment(0)

-2