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

Question

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

问题：

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

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

问题是我需要在主 div 下方另一个 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 不是
  与页脚的高度相同；
• 当您可以为 #links #footer-link-wrap div 使用文本对齐时，您使用了浮动。
• 其他一些我不记得的小事情，请尝试使用这个 css 表代替。

/*
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;
}

祝你好运。