CODEWITHSUNDEEP
htmlcsscss-positionabsolute
Geoff
Geoff

Reputation: 9570

Footer not sticking to bottom of page when scrolling

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

Upvotes: 7

Views: 23009

Answers (4)

Alex Montoya
Alex Montoya

Reputation: 5099

You need change the position to fixed

Upvotes: 6

Vucko
Vucko

Reputation: 20834

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

Upvotes: 3

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

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

Upvotes: -2

Dalton Pereira
Dalton Pereira

Reputation: 1061

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/

Upvotes: 0

Related Questions