Sticky Footer ne fonctionne pas bien sur Safari et Chrome

Que peut-il se passer dans ce cas? C'est un très bon site web .NET, mais quand je consulte le site en Safari ou en chrome, parfois le pied de page ne marche pas bien, et je dois faire défiler la page (déplacer la barre de défilement) pour qu'elle se place à sa place. C'est une chose très étrange.Sticky Footer ne fonctionne pas bien sur Safari et Chrome

C'est le plugin pied collant J'utilise, le meilleur que je l'ai utilisé jusqu'à présent, il a été pris d'un site http://www.drupalcoder.com/sticky-footer-plugin.html

Je l'ai déjà utilisé et essayé l'autre cssstickyfooter.com et ryanfait. com et beaucoup d'autres, celui ci-dessous a été le meilleur que j'ai vu jusqu'ici. Mais cela ne fonctionne pas bien sur Safari et 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 < $(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>

Source

2010-07-08 UXdesigner

Vous pouvez obtenir un "pied de page collant" avec CSS seul et qui permettra aux handicapés Navigateurs JS pour obtenir la même expérience de navigation. –

Avez-vous essayé l'un sur à CSS-Tricks?

balisage

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

css

#footer { height: 100px; }

scénario

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

Source

2010-07-08 15:32:06

Celui-là est vraiment cool, mais le pied de page «bouge» et je ne veux pas qu'il bouge ou glisse quand je bouge la page, c'est faux! – UXdesigner

mais c'est la raison d'utiliser un pied de page collant style JS ... afin qu'il se déplace pendant que vous faites défiler. Si vous voulez un pied de page fixe, alors vous allez purement CSS –

Une solution CSS pure est dans mon autre réponse. –

Je recommande d'essayer un CSS seule solution link. Cela fonctionnera sur les navigateurs avec javascript désactivé.

Source

2010-07-08 15:41:06

Comme je l'ai mentionné sur mon post ... J'ai essayé celui-là, mais ça ne marche pas pour moi. Je ne sais pas si l'utilisation de .NET/IIS a à voir avec l'interprétation des codes ... mais j'ai dû concevoir pour les applications .NET et c'est pénible. C'est beaucoup plus facile quand je travaille pour des applications php/mysql, beaucoup plus facilement. – UXdesigner

HTML/CSS/JavaScript est côté client, le langage côté serveur ne fait aucune différence si le code côté client est le même. –

Je recommande aussi d'utiliser une solution CSS. Notre site Web utilise la fonction "pied collant" et fonctionne sur tous les navigateurs que nous avons essayés. http://infinitas.ws - juste casser le code source pour voir ce que nous avons fait. –

Voilà comment nous avons fait our CSS SEULE 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; 
}

Source

2010-07-08 16:02:26

remarquez que le "pied de page" est en dehors de "l'enveloppe". Essentiellement, c'est un élément complètement séparé en dehors du reste de la mise en page. –

Sticky Footer ne fonctionne pas bien sur Safari et Chrome

Répondre

Questions connexes