另一个粘性页脚问题。具有重复 bg 和 div 的 100% 宽度 div 向右浮动

Question

我知道这个问题是一个老问题，但经过研究和尝试了 2 天，我仍然没有运气，我希望这里有人能给我一些建议！

问题：

我有一个页面需要应用粘性页脚，通常很简单，但这就是我遇到问题的地方。

我可以让页脚 div(#footer) 毫无问题地粘在底部（它是 100% 的宽度，带有重复的背景图像）然后在这个 DIV 中我用 bg-image 浮动另一个（#cut）到右边（我的例子中的剪刀）。这也很好用。

问题是我需要另一个 100% 宽度的 div(#footer-link-wrap) 在主要的下方，以便我可以在中心浮动一些导航链接(#links)。在#footer-link-wrap 中，我需要另一个一直向右浮动的图像，尝试使用定位的背景执行此操作，但我无法让它工作。

我完全碰壁了，如果有任何反馈，我将不胜感激，我刚刚在长时间的休息后重新开始设计，这可能是我犯了一个愚蠢的错误。

css如下：

* {
margin:0;padding:0;
} 


html, body {

 height: 100%;
 background-color:#000;
 }

#wrap {
 min-height: 100%;
 }

#main {
 overflow:auto;
 padding-bottom: 60px;
 }  

#footer {
 position: relative;
 margin-top:-20px; 
 height: 20px;
 clear:both;
 width:100%;
 background:url(foot-hair.png) repeat-x;
 background-position:0 8px;
}

#cut{
 float:right;
 width:40px;
 height:20px;
 background: url(haircut.png);
}

#footer-link-wrap{

 margin-top:-40px; 
 height:40px;
 width:100%;
 background:url(hair-fall.png) no-repeat;
 background-position:bottom right;

 }

#links{
 position:relative;
 margin-left:auto;
 margin-right:auto;
 width:800px;
 background-color:#fff;
 }

/*for opera
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}*/`

这里是示例float help的链接

Answer 1

你试过这个实现吗：http://www.cssstickyfooter.com/

更新：

这是我发现的问题：

• 你没有正确设置基本 粘性页脚的配置 根据规范。这 #main 的 padding-bottom 不是 与页脚的高度相同；
• 当您可以使用 text-align #links #footer-link-wrap divs 时，您使用了 float。
• 其他一些我不记得的小事，尝试改用这个 css 表。

/* 粘性页脚解决方案 史蒂夫·海切尔 http://stever.ca http://www.cssstickyfooter.com */ * {边距：0；填充：0；} /* 必须在所有内容上声明 0 边距，对于主要布局组件也使用填充，而不是 垂直边距（顶部和底部）以添加间距，否则这些边距将添加到总高度 并且您的页脚被向下推了一点，在浏览器中创建了垂直滚动条 */ html, body {高度：100%;} #wrap {最小高度：100%;} #main {溢出：自动； padding-bottom: 60px;} /* 必须与页脚高度相同 */ #footer {位置：相对； 边距顶部：-60px； /* 页脚高度的负值 */ 高度：60px； 清除：两者；} /*歌剧修复*/ body:before {/* 感谢 Maleika (Kohoutec)*/ 内容：””; 高度：100%； 向左飘浮; 宽度：0； margin-top:-32767px;/* 谢谢 Erik J - 否定浮动效果*/ } /********************************** *** 开始修改 *** ***********************************/ html，正文 { 背景颜色：#000; } #页脚{ 背景：网址（http://www.d-syne.com/float/foot-hair.png）重复-x； } ＃切{ 宽度：100%； 高度：20px； 背景： url(http://www.d-syne.com/float/haircut.png) no-repeat 右下角； } #footer-link-wrap{ 高度：40px； 宽度：100%； 文本对齐：居中； 背景：url（http://www.d-syne.com/float/hair-fall.png）无重复右下角； } ＃链接{ 文本对齐：左； 边距：0 自动； 宽度：800 像素； 背景颜色：#fff; 颜色：黑色; }

祝你好运。