1

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

考虑我的页面有一个固定的宽度，两列不同的高度，而我的页脚有 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>

我在哪里搞砸了

4

4 回答 4

1

我会尝试CSS Sticky Footer。

于 2009-04-19T05:59:55.493 回答
1

我认为，这取决于您要达到的目标。我的第一个建议是使用：

#footer {clear: both;
        }

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

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

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

这很不言自明，但本质上是将页脚附加到页面底部，并允许#footer根据其内容进行调整，也意味着#footer将是 100% 宽（给或取一个像素），所以根据你的设计。

于 2009-04-19T06:31:23.263 回答
0

没有看到代码就不能说，但是如果使用两列布局，您可能至少有一列浮动。将 style="clear:both" 放在页脚应该强制它到页面底部。

于 2009-04-19T06:18:43.187 回答
0

我把它整理好了——出于某种原因，有两个 clear:both 实例虽然我不明白这是如何导致问题的，但删除冗余条目修复了它：\ 那些似乎没有任何作用的奇怪解决方案之一感觉。无论如何，谢谢你们。

于 2009-04-22T14:54:43.933 回答