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 会在不同的屏幕分辨率下产生问题
尝试这个：
#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;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
