如何让浮动页脚粘在 IE 6 的视口底部？答案

【问题标题】：How do I get a floating footer to stick to the bottom of the viewport in IE 6?如何让浮动页脚粘在 IE 6 的视口底部？
【发布时间】：2010-09-13 21:12:49
【问题描述】：

我知道使用 position:fixed 会很容易，但不幸的是我坚持支持 IE 6。我该怎么做？我宁愿使用 CSS 来干净，但如果我必须使用 Javascript，那不是世界末日。在我当前的实现中，我有一个“浮动页脚”，它浮动在主要内容区域上方并使用 Javascript 定位。即使使用 Javascript，我现在的实现也不是特别优雅，所以我的问题是：

有没有办法在没有 Javascript 的情况下做到这一点？
如果我必须使用 Javascript，对于这个浮动页脚问题有什么“好的”解决方案吗？ “好”是指可以跨浏览器工作的东西，不会使浏览器的资源过载（因为它必须经常重新计算），并且优雅/易于使用（即编写类似 new FloatingFooter("floatingDiv") 的东西会很好)。

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

最后，只是一个更笼统的问题。我知道这个问题很难解决，那么除了在每个页面底部都有页脚内容之外，还有其他 UI 替代方案吗？在我的特定站点上，我使用它来显示步骤之间的转换。还有其他方法可以做到这一点吗？

【问题讨论】：

如果感觉很滑稽，我建议使用框架集。但我不是，所以我不会。
为什么只有一个Javascript标签？对我来说看起来像是一个 CSS 问题。
我想知道还有多少人还在用IE6？

标签： javascript css internet-explorer-6 sticky-footer

【解决方案1】：

我过去曾使用 CSS 表达式完成此操作。

试试这样的：

.footer {
    position: absolute;
    top: expression((document.body.clientHeight - myFooterheight) + "px");
}

read more here
and here

【讨论】：

所以对 IE6 使用 expression() 并使用条件 cmets 对其他所有人使用 position:fixed。
是的，这听起来是解决仅限IE问题的一种非常有效的方法。

【解决方案2】：

如果页脚有固定高度并且您知道并且可以在 CSS 中对其进行硬编码，您可以这样做：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
        .content
        {
            position : absolute;
            top : 0;
            left : 0;
            right : 0;
            bottom : 50px; /* that's the height of the footer */
            overflow : auto;
            background-color : blue;
        }
        .footer
        {
            position : absolute;
            left : 0;
            right : 0;
            bottom : 0px; /* that's the height of the footer */
    height : 50px;
            overflow : hidden;
            background-color : green;
        }
        </style>
    </head>
    <body>
        <div class="content">
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
             everything from the page goes here
        </div>
        <div class="footer">
             the footer
        </div>
    </body>
</html>

【讨论】：

【解决方案3】：

这可能对你有用。它适用于我的 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>

【讨论】：

我使用没有条件 cmets 的变体，因为我通常喜欢将我的 css 放在单独的文件中。请参阅下面的答案。
我总是忘记位置：固定；是的！

【解决方案4】：

如果您将height 放在100% 和overflow: auto 到<html/> 和<body/> 标签，任何具有绝对位置的东西都将变得固定。它最基本的是非常时髦，带有奇怪的滚动条，但可以调整到不错的结果。例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style>
            html, body
            {
                height: 100%;
                overflow: auto;
            }

            .fixed
            {
                position: absolute;
                bottom: 0px;
                height: 40px;
                background: blue;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="fixed"></div>
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br />
        overflow....<br /><!-- ... -->
    </body>
</html>

【讨论】：

【解决方案5】：

如果您不想使用条件 cmets，以便将 css 放在单独的文件中，请使用 !important。像这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
               "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html>
    <head>
        <style>
            html {
                overflow-x: auto;
                overflow-y: scroll !important;
                overflow-y: hidden; /* ie6 value b/c !important ignored */
            }

            body {
                padding:0;
                margin:0;
                height: 100%;
                overflow-y: hidden !important;
                overflow-y: scroll; /* ie6 value b/c !important ignored */
            }

            #bottom {
                background-color:#ddd;
                position: fixed !important;
                position: absolute; /* ie6 value b/c !important ignored */
                width: 100%;
                bottom: 0px;
                z-index: 5;
                height:100px;
            }
            #content {
                font-size: 50px;
            }
        </style>
    </head> 
    <body>
        <div id="bottom">
            keep this text in the viewport at all times
        </div>
        <div id="content">
            Let's create enough content to force scroll bar to appear.
            Then we can ensure this works when content overflows.
            One quick way to do this is to give this text a large font
            and throw on some extra line breaks.
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/>    
        </div>  
    </body> 
</html>

【讨论】：

【解决方案6】：

$(function(){
    positionFooter(); 
    function positionFooter(){
        if($(document).height() < $(window).height()){//Without the body height conditional the footer will always stick to the bottom of the window, regardless of the body height, $(document).height() - could be main container/wrapper like $("#main").height() it depend on your code
            $("#footer").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#footer").height())+"px"})
        }   
    }

    $(window).scroll(positionFooter);
    $(window).resize(positionFooter);
});

【讨论】：