0

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

问题：

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

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

问题是我需要另一个 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;
}*/`

这是示例浮动帮助的链接

4

1 回答 1

1

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

更新：

以下是我发现的问题：

  • 您没有根据规范正确设置粘滞页脚的基本配置。#main 的 padding-bottom 与页脚的高度不同；
  • 当您可以为您使用 #links #footer-link-wrap div 时，您使用了 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;
颜色：黑色;
}

祝你好运。

于 2010-11-01T19:28:36.263 回答