适用于 IE 和 firefox 的 CSS 页脚

Question

大家好，我正在尝试添加 CSS 页脚，但无法正常工作。现在我正在疯狂地调整它，如果它在 Firefox 中看起来很好，它在 Internet Explorer 7 中会变得一团糟，有时会在页面的一半处:(。有没有关于基于 css 的页脚的好例子。

假设我的页面有一个固定的宽度，2 列不同的高度，我的页脚有 100% 的宽度。

---

好吧，我按原样使用 css 粘性页脚 - 它在 firefox 中似乎工作正常，但在 IE 中我的页脚 float 在页面的中间。我注意到我的页脚卡在浏览器视口(viewport)高度的底部。我认为这是 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 .