堆栈内存溢出
  繁体   English   中英

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

[英]How do I get a floating footer to stick to the bottom of the viewport in IE 6?

 原文  2008-09-28 20:27:55  1   6    javascript/ css/ internet-explorer-6/ sticky-footer

问题描述

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

  1. 有没有办法在没有Javascript的情况下执行此操作？
  2. 如果我必须使用Javascript，这个浮动页脚问题是否有任何“好”的解决方案？ “好”我指的是可以在浏览器中运行的东西，不会使浏览器的资源过载（因为它必须经常重新计算），并且优雅/易于使用（即编写像new FloatingFooter("floatingDiv")这样的东西会很好new FloatingFooter("floatingDiv") ）。

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

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

6 个解决方案

解决方案1
 19 已采纳  2008-09-29 01:07:09

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

解决方案2
 3  2009-05-24 21:51:37

如果你不想使用条件注释，那么你可以将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>

解决方案3
 2  2008-09-28 20:37:44

我在过去使用CSS表达式完成了这个。

尝试这样的事情： 

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

在这里阅读更多
和这里

解决方案4
 1  2011-10-31 07:10:20

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

解决方案5
 0  2008-09-29 21:53:10

如果将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>

解决方案6
 -1  2008-09-28 20:52:11

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何让输入栏粘在 div 容器的底部？ 当我的 html 页面中的内容较少时，如何将页脚粘贴到底部 当网站顶部附近时，如何使页脚“固定”在底部？ 打印：如何将每页上的页脚粘贴到底部？ 将页脚停留在页面底部 将页脚放在页面底部 页面底部的页脚 页脚贴到底部 页脚不粘贴到底部视口 将页脚粘贴到底部（显示时）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM