5

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>

请帮帮我，当正文内容较少时，我无法调整页面底部的页脚，
页脚将向上移动，#bodyDiv 中的 min-height:550px 在不同的屏幕分辨率下会产生问题

4

3 回答 3

4

尝试这个：

 #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;
 }
于 2013-07-22T09:31:48.177 回答
1

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;
    }
于 2013-07-22T09:30:09.203 回答
1 
#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;
 }
于 2013-07-22T09:31:34.577 回答