Question

大家好我想添加一个CSS页脚，但不能正常工作。现在我正在疯狂地调整它，如果它在firefox中看起来很好，它会在Internet Explorer 7中搞砸了啊有时候是在页面的中间位置:(。对于基于CSS的页脚有什么好的例子。

考虑到我的页面有一个固定的宽度，2列不同的高度，我的页脚宽度为100％。

我正在使用css粘性页脚 - 它似乎在Firefox中运行良好但是使用IE浏览器我的页脚浮动在页面的中间位置。我注意到我的页脚挂在浏览器视口高度的底部。我认为IE如何将高度解释为100％。 css粘性页脚本身可以正常工作，但随着我的修改和添加，它在IE中搞砸了。页脚和标题的基本代码如下：

@charset "utf-8";
/* CSS Document */

html, body, #wrap {height: 100%;}
body > #wrap > #main > #pageContent {height: auto !important; min-height: 100%;}

#main
{
    background-color:#FFFFFF;
    width:960px;
    height:100% !important;
    text-align:left;
    position:relative;
}

#footer
{
    display:block;
    width:100%;
    text-align:center;
    position: relative;
    height: 150px;
    clear:both;

}
/* CLEAR FIX*/
.clearfix:after 
{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix 
{
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix 
{   
    display: block;
}
/* End hide from IE-mac */

HTML有点像这样

<div id="wrap">
 <div> header is here</div>
 <div id="main" class="clearfix">content is here </div>
</div>
<div id="footer"></div>

我搞砸了哪里

Answer 1

我会尝试CSS Sticky Footer。

Answer 2

我认为这取决于你想要实现的目标。我的第一个建议是使用：

#footer {clear: both;
        }

这至少会将页脚推到最长的列之下，假设有不止一个。

第二个建议，我的首选解决方案（请记住我不确定跨浏览器/操作系统的兼容性）是：

#footer {position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         }

这是非常明显的，但基本上将页脚附加到页面底部，并允许#footer根据其内容进行调整，这也意味着#footer将是100％宽（给或拿一个像素），所以根据你的设计进行调整。

Answer 3

不能说没有看到代码，但是使用两列布局，您可能至少有一列浮动。在页脚中放置style =“clear：both”应该强制它到页面底部。

Answer 4

我对它进行了排序 - 由于某种原因有两个明确的实例：虽然我没有看到这是如何导致问题但删除冗余条目修复它：\其中一个奇怪的解决方案似乎没有任何意义。无论如何，谢谢你们。

CSS Footer在IE和Firefox中运行

4 个答案: