在 Safari 和 Chrome 中粘贴页脚问题答案

【问题标题】：Stick Footer Issue in Safari & Chrome在 Safari 和 Chrome 中粘贴页脚问题
【发布时间】：2011-01-08 02:08:45
【问题描述】：

我的粘性页脚在除 Safari 和 Chrome 之外的所有浏览器中都能很好地工作，尤其是 work.html 页面本身。

http://obliqueinteractive.com/creative/work.html

我注意到，当我从样式表中删除此 css 属性时，问题消失了，但页脚不再粘住了

html, body {height: 100%;}

是否有其他 css 问题迫使页脚以这种方式行事？

【问题讨论】：

我看不出 Firefox 中的渲染和 Safari 中的渲染有什么区别。愿意解释应该发生什么以及实际发生了什么？

标签： css safari google-chrome footer sticky-footer

【解决方案1】：

首先，如果不查看代码就很难诊断。是的，肯定还有其他 css 问题会影响粘性页脚；即填充其他元素。同样，当我们看不到您的代码时很难诊断。

This stickey footer 很棒，我经常使用它。

【讨论】：

在谷歌中，页脚似乎被卡在了其中一个 div 下方

【解决方案2】：

粘性页脚和带填充的 div 的代码：

body{
background-image: url(../images/main_bg.jpg);
background-repeat: repeat-x;
}
#wrapper{
width: 961px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -104px; 
}
.footer, .push {
height: 104px; 
}
#work_colm{
width: 675px;
float: left;
display: inline;
padding-bottom: 40px;
}
#footer {
margin: 0 auto;
background: #292929 repeat-x;
height: 104px;
clear: both;
}

【讨论】：

嘿，谢谢你！在 .push div 上设置高度对我有用。其他解决方案将在那里放置“clear: both”，但 IE7 和 Chrome 仅在 .push 上设置与 .footer 上的高度相同后才对我有效。

【解决方案3】：

我进行了以下更改（对浮动页脚元素），它现在可以在 safari、opera、firefox 和 chrome 中使用。

width: 101%;
margin-left: -8px;

我不确定 8px 是否只是对我的修复或对所有人的修复，但试一试并告诉我

【讨论】：