CODEWITHSUNDEEP
css
dezman
dezman

Reputation: 19358

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

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.

Upvotes: 8

Views: 10116

Answers (5)

Razen
Razen

Reputation: 156

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.

Upvotes: 4

Barry P
Barry P

Reputation: 212

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.

Upvotes: 8

Tiffany Israel
Tiffany Israel

Reputation: 470

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.

Upvotes: 0

Philip Kirkbride
Philip Kirkbride

Reputation: 22859

Try adding this to your CSS

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

Upvotes: -2

Iliya Reyzis
Iliya Reyzis

Reputation: 3677

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/

Upvotes: 1

Related Questions