CSS Footer在IE和Firefox中运行

Hi guys I'm trying to add a css footer but can't it to work right. For now I'm tweaking it like crazy and if it appears fine in firefox it gets all messed up in Internet Explorer 7 ahd sometimes is halfway up teh page :(. Is there any good example out there for a css based footer.

嗨伙计们,我正在尝试添加一个CSS页脚但不能正常工作。现在我正在疯狂地调整它,如果它在firefox中看起来很好,它会在Internet Explorer 7中搞砸了啊有时是半页面:(。有没有任何好的例子,基于CSS的页脚。

Consider that my page has a fixed width, 2 columns of varying height and my footer has a 100 percent width.

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

Well I'm using the css sticky footer as is - it seems to work fine in firefox but with IE my footer is floating halfway up the page. I have noticed that my footer hangs on the bottom of the browser viewport height. I think its how IE is interpreting the height to be 100 percent of so. The css sticky footer works fine on its own but as I put my modifications and additions it gets messed up in IE. The basic code for the footer and header is as so:

好吧,我正在使用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 */

And the HTML is somewhat like this

HTML有点像这样

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

Where am I messing it up

我搞砸了哪里

4 个解决方案

#1

I'd try the CSS Sticky Footer.

我试试CSS Sticky Footer。

#2

It depends on what you're trying to achieve, I think. The first suggestion I have is to use:

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

#footer {clear: both;
        }

This will, at the least, push the footer below the longest of the columns, presuming that there's more than one.

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

The second suggestion, and my preferred solution (bearing in mind I'm not sure about cross-browser/OS compatibility), is:

第二个建议,我的首选解决方案(记住我不确定跨浏览器/操作系统的兼容性)是:

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

This is pretty self-explanatory, but essentially attaches the footer to the bottom of the page, and allows the #footer to adjust according to its contents, also it means the #footer will be 100% wide (give or take a pixel), so adjust according to your design.

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

#3

Can't say without seeing the code, but with a two column layout, you probably have at least one column floated. Placing style="clear:both" in the footer should force it to the bottom of the page.

不能没有看到代码,但有两列布局,你可能至少有一个列浮动。在页脚中放置style =“clear:both”应该强制它到页面底部。

#4

I got it sorted - for some reason there were two instances of clear:both although I don't see how that was causing a problem but removing the redundant entry fixed it :\ one of those weird solutions which don't seem to make any sense. Thanks anyway guys.

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

#1