我在让粘性页脚在我的网站上工作时遇到了一些问题。如果内容小于窗口，则页脚应位于窗口底部，死区应使用 div 填充。我认为 CSS Sticky Footer这样做，但我无法让“push div”工作，将内容一直向下推。如您所见，我的代码不仅仅是 body-wrapper-footer。
<body>
<div id="banner-bg">
<div id="wrapper">
<div id="header-bg">
<!-- header stuff -->
</div> <!-- end header-bg -->
<div id="content-bg">
<div id="content">
<!-- content stuff -->
</div> <!-- end content -->
</div> <!-- end content-bg -->
</div> <!-- end wrapper -->
</div> <!-- end banner-bg -->
</body>
body {
color: #00FFFF;
background-image: url("Images/img.gif");
font-size: 1em;
font-weight: normal;
font-family: verdana;
text-align: center;
padding: 0;
margin: 0;
}
#banner-bg {
width: 100%;
height: 9em;
background-image: url("Images/img2.gif"); background-repeat: repeat-x;
position: absolute; top: 0;
}
#wrapper {
width: 84em;
margin-left: auto;
margin-right: auto;
}
#header-bg {
height: 16em;
background-image: url("Images/header/header-bg.png");
}
#content-bg {
background-image: url("Images/img3.png"); background-repeat: repeat-y;
}
#content {
margin-right: 2em;
margin-left: 2em;
}
在我的案例中，我对 CSS Sticky Footer 代码应该放在哪里感到困惑。
编辑，这是我得到的和我想做的: alt text http://bayimg.com/image/gacniaacf.jpg
最佳答案
您的 HTML 有点奇怪。例如，为什么 banner-bg环绕一切？
也就是说，为了使用 Sticky Footer 技术，您需要将除页脚之外的所有内容 包装到一个 DIV 中。所以你的 <body>标签将只包含两个顶部 DIV - wrapper和 footer .您当前拥有的所有内容都将放入该包装器 DIV 中。
请注意，如果您使用的背景图像包含透明区域，则粘性页脚可能不适合您，因为它依赖于 wrapper。背景被标题覆盖。
更新:好的，这是有效的版本。 “粘性页脚”样式表取自 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} /* must be same height as the footer */
#footer {position: relative;
margin-top: -100px; /* negative value of footer height */
height: 100px;
clear:both;
}
/* CLEAR FIX*/
.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.clearfix {display: inline-block}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%}
.clearfix {display: block}
/* End hide from IE-mac */
/* Do not touch styles above - see http://www.cssstickyfooter.com */
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; /* banner height */
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" class="clearfix">
<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>
关于css - CSS Sticky Footer 实现的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1112082/