您的HTML有点奇怪。例如，为什么要
banner-bg包裹所有东西？
就是说，为了使用粘性页脚技术，您需要 将页脚以外的所有内容 包装到单个DIV中。因此，您的
<body>代码仅包含两个顶级DIV-
wrapper和
footer。您当前拥有的所有内容都将放入该包装器DIV中。
请注意，如果您使用的背景图像包含透明区域，则粘性页脚可能对您不起作用，因为它依赖于
wrapper页眉覆盖的背景。
更新： 好的，这是可行的版本。“StickyFooter”样式表摘自cssstickyfooter.com，并且适用于所有现代浏览器。我对HTML进行了一些简化（不需要根据图片设置单独的背景层），但是只要您保留基本结构，就可以根据需要进行修改。另外，由于我没有您的图像，因此我添加了纯色背景色以用于说明目的，因此您需要将其删除。
<html><head> <style>* {margin: 0; padding: 0} html, body, #wrap {height: 100%}body > #wrap {height: auto; min-height: 100%}#main {padding-bottom: 100px} #footer {position: relative; margin-top: -100px; height: 100px; clear:both;}.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}.clearfix {display: inline-block}* html .clearfix { height: 1%}.clearfix {display: block}body { background-image: url("Images/img.gif"); background: #99CCFF; color: #FFF; font-size: 13px; font-weight: normal; font-family: verdana; text-align: center; overflow: auto;}div#banner { position: absolute; top: 0; left: 0; width: 100%; height: 9em; background: url("Images/img2.gif") repeat-x; background: #000;}div#wrap { background: #666; width: 84em; margin-left: auto; margin-right: auto;}div#header { height: 16em; padding-top: 9em; background: url("Images/header/header-bg.png"); background: #333; }div#footer { background: #000; width: 84em; margin-left: auto; margin-right: auto;} </style></head><body> <div id="banner">Banner</div> <div id="wrap"> <div id="main" > <div id="header">Header</div> <div id="content"> Content<br /> Content<br /> Content<br /> Content<br /> Content<br /> Content<br /> Content<br /> Content<br /> Content<br /> Content<br /> Content </div> <!-- end content --> </div> <!-- end main --> </div> <div id="footer"> Footer </div></body></html>欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）