Question

在这种情况下会发生什么？这是一个非常好的.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>

Answer 1

我建议您尝试使用仅限CSS的解决方案link。这适用于已禁用javascript的浏览器。

Answer 2

以下是我们如何完成our 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;
}

Answer 3

您是否曾在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)

});

DEMO LINK

Sticky Footer在Safari和Chrome上无法正常工作

3 个答案: