Footer doesn't stick to bottom - html

Question

i am working on struts2 application.when i am dealing with jsp pages one problem is occurred, when page contents are less footer float below the contents, this will look very bad.but when contents are more than page then it automatically float to the bottom.this is ok for me. Any help will be appreciated...
the code used for footer in css is...
#footer {
height:41px;
background:url(../images/main-bg.png) repeat-x;
width: 100%;
}

Answer 1

For a sticky footer (always on the bottom of the page, no matter the height of the page), use position: fixed;
#footer {
height:41px;
background:url(../images/main-bg.png) repeat-x;
position: fixed;
bottom: 0;
width: 100%;
}

Answer 2

If you are looking for making the footer to be always visible on the browser window that doesn't get affected by scrolling then position:fixed will do. However that will look bad when the content is more and you need scrolling and still the footer stays in the viewing area overlapping the content. A clean solution is to move the footer markup outside the wrapper div. Something like should be good:
SAMPLE DEMO
CSS-
html, body {
height: 100%;
}
#wrapper {
background-color:yellow;
height: 90%; //sharing the height between wrapper and footer
margin:0px;
}
#footer {
background-color:green;
height: 10%;
min-height:20px;
max-height:40px;
}