Adjust Footer based on content.

Question

Hi, I am using this site.

Aim :
I want to move my footer based on the content of every page.

1)If there is more content then i want to put my footer after the content.
2)I want to fix the footer to the bottom of the window screen, if there is no content like this in the following picture

My existing CSS :

I am currently using min-height property in #content to keep the footer at the bottom.

#footer_outer{
    width:100%;
    background:#444;
    padding:10px 0 0 0;
    margin-top:50px;
    height: 130px;
}

#footer {
    margin:0 auto;
    width:834px;
    height:auto;
    overflow:hidden;
}

#content {
    padding:5px;
    margin:0 auto;
    width:890px;
    height:auto;
    min-height:450px;
}

body {
    font-family:'Helvetica Neue', helvetica, arial, sans-serif;
    color:#757575;
    font-size:14px;
    padding:0;
    margin:0;
    background:#FAFAFA;
}

Please help me in achieving my aim. Thanks a lot in advance.

regards, vaths

Answer 1

1. Use fixed position divs

http://www.dailycoding.com/Posts/creating_always_visible_div_using_css.aspx

Change CSS to

#footer {
    margin:0 auto;
    width:834px;
    height:auto;
    overflow:hidden;
    position: fixed;
    bottom: 0px;
}

2. How to keep footers at the bottom of the page

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page