How to keep included footer at bottom of short page without min-height, sticky-footer or javascript

Question

I've got 60 pages all with the same footer, included with php. The amount of content varies from 300px in height to 2000+. I don't think this is possible, but it would be great if I could get the footer to sit at the bottom of the browser window, if the page is shorter than the window, and behave normally (pushed to the bottom) otherwise, with just CSS. Thanks.

If I understand you correctly, you want the footer to always be on the bottom of the page, right? Just position your footer element like so: #footer {position: fixed; bottom: 0;} — Jory Cunningham, Jul 31 '12 at 17:54
@JoryCunningham I don't think he wants it to be at the bottom when the page is long, he just want it at a normal position when the page is long and at the bottom when short — Huangism, Jul 31 '12 at 17:55
if you can add a class to a parent container on the short pages then you can use CSS to position it but I am assuming your pages are all dynamic so adding that class to a parent would not e plausible — Huangism, Jul 31 '12 at 17:55
Possible duplicate of [How can a variable-height sticky footer be defined in pure CSS?](http://stackoverflow.com/questions/10825879/how-can-a-variable-height-sticky-footer-be-defined-in-pure-css) — clozach, May 24 '16 at 19:51

score 8 · Accepted Answer · edited Oct 13 '13 at 18:01

I know this post is pretty old, but I found a great resource for this exact thing.

http://ryanfait.com/sticky-footer/

here is just the css:

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

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Good luck.

score 4 · Answer 2 · answered Oct 20 '15 at 15:18

4

This is waaaay too late and the answer is somewhat similar to the one by Barry P.

For your wrapper css class add the following,

min-height: calc(100vh - 155px);

Note: This does not work in IE8 or lower.

answered Oct 20 '15 at 15:18

Razen

126
8

score 1 · Answer 3 · answered Jul 31 '12 at 17:58

1

here is an article that is targeting even IE7 footer stays at the bottom when there is a little content and drags down when there is alot of content

http://snipplr.com/view/15334/

answered Jul 31 '12 at 17:58

Iliya Reyzis

3,183
2
17
31

That uses a specific height. If you read the question, you'd see that wasn't an option. – Athoxx Aug 01 '13 at 09:08

score 0 · Answer 4 · answered Jul 31 '12 at 19:38

0

I would try give your content a min-height of say 500px...

#content {
   min-height: 500px;
}

That way, even if you only had 300px of content the 500px (or longer if necessary) would make sure that the footer is pushed far enough down to be at the very bottom.

answered Jul 31 '12 at 19:38

Tiffany Israel

460
1
7
20

I don't want to use min-height because on a phone the page will be unnecessarily long. – dezman Jul 31 '12 at 19:40
2

I don't like this solution at all because it doesn't actually push the footer to the bottom. But the smartphone-problem is a non-issue. Simply use media queries to re-set the CSS. like so: @media screen and (max-width: 640px) { #content { min-height: 0; } } – Athoxx Aug 01 '13 at 09:07

Philip Kirkbride · Answer 5 · 2012-07-31T18:00:12.550

-2

Try adding this to your CSS

#footer {position: fixed; bottom: 0;}

edited Jul 31 '12 at 18:00

answered Jul 31 '12 at 17:54

Philip Kirkbride

17,347
30
101
195

1

"and behave normally (pushed to the bottom) otherwise, with just CSS." – Huangism Jul 31 '12 at 17:57
2

Both your CSS and your link tie the footer to the bottom of the browser window in all cases. watson wants the footer in its normal end-of-document position for "long" documents and only at the bottom of the window for documents that are shorter than the window height. – Stephen P Jul 31 '12 at 17:59
So the idea would be to compare the combined height of the header, content, and footer against the current window size. If the height is smaller than the window size, then add a class that "pins" the footer with {position: fixed; bottom: 0;}? Does that sound right? – Jory Cunningham Jul 31 '12 at 18:06
Wouldn`t you need Javascript to do that? – Philip Kirkbride Jul 31 '12 at 18:07
Yes, otherwise you would be stuck with a fixed height threshold and using a media query to switch the "pinning" on and off, but I think that would, miss the goal. – Jory Cunningham Jul 31 '12 at 18:08

How to keep included footer at bottom of short page without min-height, sticky-footer or javascript

5 Answers5