Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

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.

like image 284
dezman Avatar asked Jul 31 '12 17:07

dezman


1 Answers

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.

like image 58
Barry P Avatar answered Nov 15 '22 15:11

Barry P