0

在这种情况下会发生什么？这是一个非常好的 .NET 网站，但是当我在 Safari 或 chrome 中检查网站时，有时页脚无法正常工作，我必须滚动页面（移动滚动条）以使其适合正确的位置。这是一件非常奇怪的事情。

这是我正在使用的粘性页脚插件，迄今为止我用过的最好的，它取自一个网站http://www.drupalcoder.com/sticky-footer-plugin.html

我已经使用并尝试过其他 cssstickyfooter.com 和 ryanfait.com 以及许多其他网站，下面的这个是我迄今为止见过的最好的。但它在 Safari 和 Chrome 上效果不佳。

看一下这个：

<script type="text/javascript">
    $(document).ready(function() {
        $("#footer").stickyFooter();
    });

    // sticky footer plugin
    (function($) {
        var footer;

        $.fn.extend({
            stickyFooter: function(options) {
                footer = this;

                positionFooter();

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

                function positionFooter() {
                    var docHeight = $(document.body).height() - $("#sticky-footer-push").height();
                    if (docHeight < $(window).height()) {
                        var diff = $(window).height() - docHeight;
                        if (!$("#sticky-footer-push").length > 0) {
                            $(footer).before('<div id="sticky-footer-push"></div>');
                        }
                        $("#sticky-footer-push").height(diff);
                    }
                }
            }
        });
    })(jQuery);
    </script>
4

3 回答 3

1

我建议尝试仅使用 CSS 的解决方案链接。这将适用于禁用 javascript 的浏览器。

于 2010-07-08T15:41:06.960 回答
1

下面是我们如何完成我们的CSS ONLY 解决方案

标记

<body>
 <div id="wrapper">
     <div id="header"></div>
     <div id="menu"></div>
     <div id="main"></div>
     <div id="clearfooter"></div>
 </div>
 <div id="footer">
     <div class="footer"></div>
 </div>
</body>

CSS

/*General Site Design*/
body
{
    margin: 0;
}
#wrapper
{
    width: 900px; /*same width as w\idth inside "outer" element*/
}
#header
{
    height: 63px;
}
#menu
{
    width: 798px;
    height: 20px;
    margin-left: 50px;
}
#main
{
    width: 780px;
    margin-left: 60px;
    margin-top: 20px;
    min-height: 100%;
    height: 100%;
    background-color: #FFFFFF;
}

/*Footer Layout*/
#clearfooter
{
    height: 75px; /*same as footer height*/
}
#footer
{
    width: 900px;
    height: 75px;
    background-image: url(Images/Footer_bg.gif);
    margin: -75px auto 0; /*opposite px to height*/ 
    z-index:10;
}
.footer
{
    padding-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
    width: 800px;
}
于 2010-07-08T16:02:26.283 回答
0

你在CSS-Tricks 上试过了吗？

标记

<div id="footer">
    Sticky Footer
</div>

css

#footer { height: 100px; }

脚本

// Window load event used just in case window height is dependant upon images
$(window).bind("load", function() { 

       var footerHeight = 0,
           footerTop = 0,
           $footer = $("#footer");

       positionFooter();

       function positionFooter() {

                footerHeight = $footer.height();
                footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";

               if ( ($(document.body).height()+footerHeight) < $(window).height()) {
                   $footer.css({
                        position: "absolute"
                   }).animate({
                        top: footerTop
                   })
               } else {
                   $footer.css({
                        position: "static"
                   })
               }

       }

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

});

演示链接

于 2010-07-08T15:32:06.787 回答