Getting footer the stay at the bottom

Question

I'm trying to make the footer stay at the bottom using CSS, - sticky footer:

.wrapper {
  margin: 0 auto;
  padding: 0 0 0 0;
  width: 100%;
  text-align: left;
  background: #F5F5FF;
}

.page .footer {
  left: 0;
  width: 100%;
  min-width: 300px;
  position: fixed;
  margin-top: -150px;
}

.tfoot {
  background: #3E5C92;
  color: #E0E0F6;
}

.smallfont {
  font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

And here's the HTML of the thing:

<div class="wrapper">My stuff</div>
<div class="footer">
<div class="tfoot" align="left" style="padding:6px">
<div class="smallfont" style="float:right">
<a href="?app=about">About Extranet</a>&nbsp;<a href="?app=changelog">Changelog</a>&nbsp;</div>
<div style="color:white">
<small>Copyright &copy; 2009 Radon Systems&nbsp;|&nbsp;Shamil Nunhuck&nbsp;|&nbsp;<?php echo($product.'&nbsp;|&nbsp;'.$version.'&nbsp;|&nbsp;'.$build); ?>
</div></div></small></div>

But it's not sticking to the bottom, at all. What's wrong with it?

score 7 · Answer 1 · answered Jun 07 '09 at 20:27

7

Try this method (its the only one I've found consistently works):

http://www.cssstickyfooter.com/

answered Jun 07 '09 at 20:27

jrista

32,447
15
90
130

You have to implement it EXACTLY how it says. Its not a pick and choose sort of thing. If you design your outer page structure to exactly follow that method, it will work. – jrista Jun 07 '09 at 20:50
Currently rewriting the CSS file and restructuring it. – bear Jun 07 '09 at 22:18
They describe `clearfix` as a "hack". Ok fine. But they then proceed to tell you to implement the following css: `margin-top:-32767px;`. ... – ne1410s Aug 26 '15 at 08:31

score 4 · Accepted Answer · edited Jan 08 '14 at 11:13

4

If you want for example .footer to stick to bottom try the following :

.footer { position:fixed; bottom:0; width:100%; height:110px;}

Of course i made the width and height up so change as you require.

Hope this helps!!

edited Jan 08 '14 at 11:13

Acelasi Eu

914
2
9
30

answered Jun 07 '09 at 22:06

Ali

253
1
4

4

Be ware that this will force the footer to "float" above any other document content. If you want the footer to stick the to bottom except when the document content is longer than the visible window height, this won't work. This will also not work in IE6. – jrista Jun 08 '09 at 00:02

score 1 · Answer 3 · edited May 23 '17 at 12:30

1

You do not have bottom: set.

Dup: HTML footer problem

edited May 23 '17 at 12:30

Community

1
1

answered Jun 07 '09 at 20:25

John Farrell

24,673
10
77
110

Getting footer the stay at the bottom

3 Answers3