Automatic CSS height

Question

I have a problem with my website footer. As supposed to be, it's rendered after the page's content, but when the page's content is less than the browser's height is annoying to see it on the middle of the page.

I'm correcting this behavior manually setting the footer to position:absolute; bottom:0, but doing so, breaks the footer when the content is greater than the browsers height. There is any way to automate this?

The content is just a div, with no aditional style and normally, the footer is position:relative; bottom:0. The website could be seen here: http://vestibulandos.oplex.com.br

Thanks.

score 4 · Accepted Answer · answered Aug 13 '12 at 13:12

4

Have a look at http://www.cssstickyfooter.com/

answered Aug 13 '12 at 13:12

Nix

5,746
4
30
51

score 1 · Answer 2 · answered Aug 14 '12 at 14:59

1

.wrapper {
margin: 0 auto -60px; /* the bottom margin is the negative value of the footer's height */
 }
 
/* FOOTER BOTTOM --------------------------------------------------------*/
 
.footer, .push {
    height: 60px; /* .push must be the same height as .footer */
}
 
#footer{
    position: relative;
    width: 100%;
    height: 60px;
}

answered Aug 14 '12 at 14:59

Ma9ic

1,107
4
16
30

But, what if the footer has dynamic height, because when logged in appear more links... But anyways, thanks. – Danniel Magno Aug 14 '12 at 19:22
1

It's really tricky to do a dynamic sticky footer without javascript. If you have some way of controling the markup based on whether or not the user is logged in, you could add a class to your markup and change things accordingly. – Nix Aug 18 '12 at 06:58

Automatic CSS height

2 Answers2