我有一个用这个css定义的页脚问题：
div#footer {
height:80px;
background-color:#f2f2f2;
bottom:0;
left:0;
z-index:999;
border-top: solid 1px #ccc;
}
在 Firefox 中，它可以正常工作，因此页脚一直持续到页面末尾：
但在 Chorme 中，当页面很短时，我会得到类似的结果：
但我希望红色块也为灰色，因为在火狐中。
我可以在不为页脚设置固定高度的情况下修复它吗？谢谢。
更多代码：
div#footer .main {
width:986px;
margin:0 auto;
color:#999;
font-size:11px;
}
body {
background-color:#E0DDD2;
font-family: Helvetica,Arial,sans-serif;
font-size:12px;
color:#1a1a1a;
line-height:16px;
}
<body>
<div id="footer">
<div class="main">
<cq:include path="footer" resourceType="where/components/iparsys"/>
</div>
</div>
</body>