Sticky Footer doesn't work well on Safari and Chrome_问答_开发者

Sticky Footer doesn't work well on Safari and Chrome

开发者 https://www.devze.com 2023-01-06 00:09 出处：网络

What can be happening in this case ? It\'s a very nice .NET website, but when I check the website in Safari or chrome, sometimes the footer doesnt work well, and I have to scroll the page (move the sc

What can be happening in this case ? It's a very nice .NET website, but when I check the website in Safari or chrome, sometimes the footer doesnt work well, and I have to scroll the page (move the scroll bar) so it fits in it's rigth place. It's a very weird thing.

This is the sticky footer plugin I'm using , the best I've used so far, it was taken from a site http://www.drupalcoder.com/sticky-footer-plugin.html

I've already used and tried the other cssstickyfooter.com and ryanfait.com and many others, this one below has been the best I've seen so far. But it doesn't work well on Safari and Chrome.

Check this out:

<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 < $(win开发者_开发问答dow).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>

I recommend trying a CSS only solution link. That will work on browsers with disabled javascript.

Here's how we've done our CSS ONLY solution

Markup

<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;
}

Have you tried the one over at CSS-Tricks?

markup

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

css

#footer { height: 100px; }

script

// 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