Question

我的页面结构如下：

<div id="container">
   <div id="header">top menu</div>
   <div id="content">content</div>
   <div id ="footer" align="center">
       <div class="left">left part of footer menu</div>
       <div class="right">right part of footer menu</div> 
   </div> 
</div>

Css风格：

#container {
    position:relative;
    height:auto !important;
    height:100%;
    min-height:100%;
}

#content {
padding:0em 0em 12em;
}

#footer {
    position:absolute;
    width:100%;
    bottom:0; 
}

.left {
    float: left;
}

.right {
    float: right;
}

在所有浏览器中都可以。但是当我添加

<script type="text/javascript"></script>

里面

<div class="left">

在FireFox中（仅）脚本部分在脚本到达顶部之后 - 在标题和内容div之间。怎么了？

UPD 这一切都与#content中的错误标记有关。当我错过了一个封闭的桌面标签时，只有FireFox不明白:)谢谢大家，你们帮我解决了。

Answer 1

#footer具有绝对位置，位于相对定位的#container div中，所以我希望如此。也许尝试制作容器absolutley。

另外我认为你的标记不是你想要的。有一个太多的开放div标签。

Answer 2

将#container高度从auto更改为100％并删除额外的高度线。汽车正在弄乱计算，因为它会覆盖100％的行，因为！important值

Answer 3

由于＃footer的位置是绝对的，底部为0，它将相对于其第一个（非静态定位）父级定位，即#container。基本上这里发生的事情是#container变得不那么高了，并用它拖动#footer。

这种情况正在发生，因为你在#container的css中有两个height:设置（不知何故，脚本标签触发它刷新）所以行为将是未定义的。

如果你试图让页脚粘在窗口的底部，包括它的大小调整，我会建议让一个javascript函数处理它，由窗口的resize事件触发（这很简单，见{{ 3}}

Answer 4

您可以使用绝对定位以不同的方式尝试CSS。我尽量避免使用float因为会导致意外的渲染问题。有关替代方法，请参阅this jsFiddle。在我身上使用IE6，Chrome12和FF3.6以及FF4。

Javascript调用在Firefox中浮动的废墟

4 个答案: