How To Keep Footer At Bottom Of Page?

CSS * { margin: 0px; padding: 0px; } html { margin: 0px; padding: 0px; } body { line-height: 1; margin: 0px; padding:0px; background:ur

Solution 1:

Try this:

#footer {
     background: url("../images/footer_back.png") repeat-x scroll left top transparent;
     height: 100px;
     margin-top: -50px;
     position: fixed;
     bottom:0;
     width: 100%;
     z-index: 1;
 }

Solution 2:

#footer {
     background: url("../images/footer_back.png") repeat-x scroll left top transparent;
     height: 100px;
     margin-top: -50px;
     position: absolute;
     width: 100%;
     z-index: 1;
     clear:both;
 }

Solution 3:

HTML

<divid="topHeaderBar"></div><divid="wrapper"><divid="bodyWrapper"><divid="header"><jsp:includepage="menu.jsp"></jsp:include></div><divid="bodyDiv"style="position: relative;">body content</div><divid="footer"><jsp:includepage="footer.jsp"></jsp:include></div></div>

CSS :

html,body{
        height: 100%
    }

    #header{
        background-color: yellow;
        height: 100px;
        width: 100%;
    }

    #holder {
        min-height: 100%;
        position:relative;
    }

    #body {
        padding-bottom: 100px;
    }

    #footer{
        background-color: lime;
        bottom: 0;
        height: 100px;
        left: 0;
        position: absolute;
        right: 0;
    }