Footer not sticking to bottom of page when scrolling

html css css-position absolute
Geoff picture Geoff · Jul 27, 2013 · Viewed 19.2k times · Source

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

Answer

Alex Montoya picture Alex Montoya · Jun 28, 2018

You need change the position to fixed

Related questions

CSS z-index not working (position absolute)

I am trying to make the black div (relative) above the second yellow one (absolute). The black div's parent has a position absolute, too. #relative { position: relative; width: 40px; height: 100px; background: #000; z-index: 1; margin-top: 30px; } .absolute { position: absolute; top: 0; left: 0; …

Read More
How to place a div on the right side with absolute position

I've a page where a dynamic message box has to be displayed without disturbing the actual page. This message box has to appear at the top right corner of the page overlapping the existing contents. I've tried to use position: …

Read More
How to center a "position: absolute" element

I'm having a problem centering an element that has the attribute position set to absolute. Does anyone know why the images are not centered?

Read More