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

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

问题:

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

我可以让页脚div（#footer）在没有问题的情况下保持在底部（它的宽度为100%，有一个重复的背景图像），然后在这个div中，我浮动另一个（#cut），右边有一个bg图像（在我的示例中是剪刀）。这也很好

问题是，我需要在主分区的下方再加一个100%宽度的分区（#页脚链接环绕），这样我就可以在中央浮动一些导航链接（#链接）。在#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;
}*/`

---

下面是一个链接，指向您是否尝试过此实现的示例：

更新：

以下是我发现的问题：

• 你没有正确地设置基本参数 粘性页脚的配置 根据规格。这个 主管道底部的填充物不是 与页脚高度相同
• 当您可以使用文本对齐#链接#页脚链接换行div时，您使用了float
• 其他一些我不记得的小事情，试着用这个css表代替

/* 粘性页脚解决方案 史蒂夫·哈彻 http://stever.ca http://www.cssstickyfooter.com */ *{边距：0；填充：0；} /*必须在所有内容上声明0页边距，并且对于主布局组件，使用填充，而不是 垂直边距（顶部和底部）以添加间距，否则这些边距将添加到总高度 你的页脚会被向下推一点，在浏览器中创建垂直滚动条*/ html，正文{高度：100%；} #包裹{最小高度：100%；} #主{溢出：自动； 填充底部：60px；}/*必须与页脚高度相同*/ #页脚{位置：相对； 页边距顶部：-60px；/*页脚高度的负值*/ 高度：60px； 清除：两个；} /*歌剧修复*/ 正文：在{/*感谢Maleika（科霍特克）之前*/ 内容：“； 身高：100%； 浮动：左； 宽度：0； 利润顶部：-32767px；/*谢谢Erik J-否定浮动的影响*/ } /********************************** ***开始修改*** ***********************************/ html，正文{ 背景色：#000； } #页脚{ 背景：url(http://www.d-syne.com/float/foot-hair.png)重复-x； } #削减{ 宽度：100%； 高度：20px； 背景：url(http://www.d-syne.com/float/haircut.png)无重复右下角； } #页脚链接换行{ 高度：40px； 宽度：100%； 文本对齐：居中； 背景：url(http://www.d-syne.com/float/hair-fall.png)无重复右下角； } #链接{ 文本对齐：左对齐； 保证金：0自动； 宽度：800px； 背景色：#fff； 颜色：黑色； }

---

祝你好运。

Hi，这正是我从中获得原始代码的地方，它可以很好地处理单个DIV，但当涉及到多个DIV时，我感到困惑，这不是解决方案，但也许它可以帮助你。因为#页脚链接环绕的高度太小，所以#页脚链接环绕上的图像似乎没有显示。尝试将页边距顶部和高度更改为100px，您就可以看到它。它看起来是否像您想要的那样，带有清晰的：#页脚链接环绕？在#页脚链接环绕中，图像的高度仅为40px，这样就足够了。清除：页脚上的两个链接换行已将DIV移到页脚下（在FF、Crome和Opera中），但下方显示在页面外，即您必须滚动才能看到它。在IE6中，#footer链接包装仍然显示在#footer div的上方。感谢您迄今为止的帮助，我们已经成功了！您是否可以发送一个可视化演示，说明如何定位div（在文本文件中使用管道和线条的屏幕截图或可视化表示）。 /* Sticky Footer Solution by Steve Hatcher http://stever.ca http://www.cssstickyfooter.com */ * {margin:0;padding:0;} /* must declare 0 margins on everything, also for main layout components use padding, not vertical margins (top and bottom) to add spacing, else those margins get added to total height and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ html, body {height: 100%;} #wrap {min-height: 100%;} #main {overflow:auto; padding-bottom: 60px;} /* must be same height as the footer */ #footer {position: relative; margin-top: -60px; /* negative value of footer height */ height: 60px; clear:both;} /*Opera Fix*/ body:before {/* thanks to Maleika (Kohoutec)*/ content:""; height:100%; float:left; width:0; margin-top:-32767px;/* thank you Erik J - negate effect of float*/ } /********************************** *** Start of your modifications *** ***********************************/ html, body { background-color:#000; } #footer { background:url(http://www.d-syne.com/float/foot-hair.png) repeat-x; } #cut{ width:100%; height:20px; background: url(http://www.d-syne.com/float/haircut.png) no-repeat bottom right; } #footer-link-wrap{ height:40px; width:100%; text-align: center; background:url(http://www.d-syne.com/float/hair-fall.png) no-repeat bottom right; } #links{ text-align: left; margin: 0 auto; width:800px; background-color:#fff; color: black; }