Footer problem in CSS... Need help

Question

Hi people

AIM : I want to position footer based on many factors. It can be found here

1) I want to position the footer at the bottom of the screen if there is no content(or may be 1 or 2 lines) on my page. (footer visible without scrolling down - no scrollbars)

2) My footer has to be relatively placed below the last line of content if there is so much content in my page. So footer should adjust its position according to the content.

Note : The footer has to be consistent on different systems with different screen size/resolution... (a netbook is different from a laptop in its screen size).

Other INFO ----> There is a #footer_outer inside which the #footer lies.

#frame {
    margin:0 auto;
    width:962px;
    margin-top:10px;
    height:auto;
}

#content {
    padding:5px 5px 5px 5px;
    margin:0 auto;
    width:890px;
    height:auto;
    min-height: 372px; /* i use this to have footer at the bottom of **my** screen when there is not much content. */
}

#footer_outer{
    width:100%;
    background:#444;
    padding:10px 0 0 0;
    height: 130px;
    position:relative;  /*to put footer_outer 50px below the content*/
    top: 50px;
    bottom:0px;
}

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

Please help me in making changes to this CSS. Thank you very much!

Answer 1

 <style>
  #wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -100px; /* fix negative height */
  }
  #footer, #push {
    height: 100px; /* fix positive height */
    clear: both;
    background:#000;
  }
 </style>

<div id="wrapper">
  <p>content here.</p>
  <div id="push"></div>
</div>
<div id="footer">
  footer
</div>

http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ ​

Answer 2

checkout this 5 different solutions and pick the best for you

1 to 4 can be found here

another one here

Answer 3

Due to the content being of variable lengths I can't see any other way than using JavaScript, especially if you want it different for different screen sizes. You'd need to first check the viewport height, then the height of #content, and do the maths to fit the footer where you want based on those numbers

Answer 4

Try to define your page container like this: height:100%; position:relative;

then, inside that container, place your footer div width, position:absolute; bottom: 0px;