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

 <div id="topHeaderBar"></div>
        <div id="wrapper">
            <div id="bodyWrapper">
                <div id="header">
                    <jsp:include page="menu.jsp"></jsp:include>
                </div>
                <div id="bodyDiv" style="position: relative;">body content</div>
                <div id="footer">
                    <jsp:include page="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;
    }