div at bottom of the page?

Question

How to show a div.bottom of some 100px height at the bottom of the page. If the content height is less than window's height, div.bottom will be shown at the bottom of the window. If the height of the content is greater than window's height it will be shown at the bottom of the page.

score 2 · Answer 1 · answered Feb 01 '11 at 15:11

2

Do you need something like this?

<div style="position:absolute; bottom:0;">Hi</div>

http://jsbin.com/ayaqo4

answered Feb 01 '11 at 15:11

Fran Verona

5,438
6
46
85

Does this require you absolutely position everything else? It seems like this would cover things up if you weren't careful. – Gordon Gustafson Feb 01 '11 at 15:15
nope, in this case when I scroll the page down the div.bottom is moved up. – coure2011 Feb 01 '11 at 16:56

score 1 · Accepted Answer · edited May 23 '17 at 12:07

What you're talking about is called a sticky footer, and it can be done with just html and css. The basic idea is to use a wrapper with heights: 100% and a negative margin to move it above the very bottom. Stole the code snippet from here and here:

<body>
    <div class="wrapper">content here!
         <div class="push"></div>
    </div>

    <div class="footer">footer content</div>
</body>

* {

    margin: 0;
  }
  html, body {
    height: 100%;
  }
  .wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
  }
  .footer, .push {
    height: 142px; /* .push must be the same height as .footer */
  }

score 1 · Answer 3 · answered Feb 01 '11 at 15:57

1

This is my personal favorite for sticky footers:

http://www.cssstickyfooter.com/

answered Feb 01 '11 at 15:57

inxilpro

20,094
2
24
28

score 0 · Answer 4 · answered Feb 01 '11 at 15:13

You need to use css,

div.pos_fixed_footer{
    position:fixed;
    bottom:0%;
    right:0px;
    background:transparent url(../img/bg_header.png) repeat scroll center top;  
    width:100%;
    height:40px;
}

and then call in your script like this

<div id="pos_fixed_footer"><?php include "footer.html"; ?></div>

score 0 · Answer 5 · answered Feb 01 '11 at 15:30

I think you mean a footer that is in the bottom of the window only if the content doesn't overflow the window, otherwise it has to go down on the page.

Just implement the code from here http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

div at bottom of the page?

5 Answers5