如何在IE 6中将浮动页脚粘贴到视口底部？

Question

如何在IE 6中将浮动页脚粘贴到视口底部？

Bia*_*cki 12 javascript css sticky-footer internet-explorer-6

我知道这对于位置很容易:固定,但不幸的是我坚持支持IE 6.我怎么能这样做？我宁愿使用CSS来干净,但如果我必须使用Javascript,那不是世界末日.在我目前的实现中,我有一个"浮动页脚"浮动在主要内容区域上方,并使用Javascript定位.我现在的实现即使使用Javascript也不是特别优雅,所以我的问题是:

有没有办法在没有Javascript的情况下执行此操作？
如果我必须使用Javascript,这个浮动页脚问题是否有任何"好"的解决方案？"很好"我指的是可以跨浏览器工作的东西,不会超载浏览器的资源(因为它必须经常重新计算),并且优雅/易于使用(即写出类似的东西会很好new FloatingFooter("floatingDiv")).

我猜想没有超级简单的解决方案可以满足上述所有要求,但我可以构建的东西会很棒.

最后,只是一个更普遍的问题.我知道这个问题很难解决,那么其他UI替代方案是什么,而不是在每个页面的底部都有页脚内容？在我的特定网站上,我用它来显示步骤之间的转换.还有其他方法吗？

Answer 1

Tap*_*nic 19

这可能对你有用.它适用于IE6和Firefox 2.0.0.17.试一试.我的页脚高度非常高,只是为了效果.您显然会将其更改为您需要的内容.我希望这适合你.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Liquid Footer</title>
    <style type="text/css">
    .footer {
background-color: #cdcdcd;
height: 180px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
width: 100%;
position:fixed;
left: 0px;
bottom: 0px;
}
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
    body {height:100%; overflow-y:auto;}
    html {overflow-x:auto; overflow-y:hidden;}
    * html .footer {position:absolute;}
    </style>
    <![endif]-->
</head>

<body>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   This is to expand the content on the page<br>
   <div class="footer">-- This is your liquid footer --</div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	16 年，11 月前
查看次数：	31946 次
最近记录：	12 年，3 月前