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

Question

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

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

我猜想没有超级简单的解决方案可以满足上述所有内容，但我可以建立的东西会很棒。

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

score 19 · Accepted Answer

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

score 3 · Accepted Answer

如果您确实不想使用条件注释，以便可以将 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>

score 2 · Accepted Answer

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

尝试这样的事情：

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

在这里和这里阅读更多

score 1 · Accepted Answer

$(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);
});

score 0 · Accepted Answer

如果你把heightto100%和overflow: autoto <html/>and<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>

score -1 · Accepted Answer

如果页脚有固定高度并且你知道它并且可以在 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>

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

6 回答 6

Related