How to keep footer at bottom of page? [closed]

问题

CSS

 * {
     margin: 0px;
     padding: 0px;
 }
 html {
     margin: 0px;
     padding: 0px;
 }
 body {
     line-height: 1;
     margin: 0px;
     padding:0px;
     background:url("../images/22.jpg") scroll center top #16202C;
     /*  box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset;
    -webkit-box-shadow: 0 0 225px rgba(0, 0, 0, 0.45) inset;
    -moz-box-shadow:  0 0 225px rgba(0, 0, 0, 0.45) inset;
-o-box-shadow:  0 0 225px rgba(0, 0, 0, 0.45) inset; */
     color: #464646;
     font: 13px/17px arial, sans-serif;
     min-width: 1300px;
 }
 #wrapper {
     margin: 0px;
 }
 #header {
     height: 40px;
     width: 100%;
 }
 #bodyWrapper {
     width: 980px;
     margin: 0px auto;
     position: relative;
     z-index: 2;
     -webkit-box-shadow: 0px 0px 2px #000 outset;
     -moz-box-shadow: 2px 0px 2px #000 outset;
     box-shadow: 20px 0px 2px #000 outset;
 }
 #bodyDiv {
     min-height: 550px;
     height: 100%;
     background:#fff;
     padding:20px 10px;
 }
 #footer {
     background: url("../images/footer_back.png") repeat-x scroll left top transparent;
     height: 100px;
     margin-top: -50px;
     position: relative;
     width: 100%;
     z-index: 1;
 }

HTML

<body>
    <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>
</body>

Please help me out, I'm not able to adjust footer at bottom of page
when body contents are less footer will be shifted upwards and min-height:550px in #bodyDiv creates problem in different screen resolutions

回答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;
 }

回答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;
 }

回答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;
    }

来源：https://stackoverflow.com/questions/17783937/how-to-keep-footer-at-bottom-of-page

标签

html

css