粘滞页脚在Safari和Chrome上无法正常工作

在这种情况下会发生什么情况？这是一个非常漂亮的.NET网站，但是当我在Safari或Chrome浏览器中查看网站时，有时候页脚不能正常工作，而且我必须滚动页面（移动滚动条）才能适合它。这是非常奇怪的事情。粘滞页脚在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>

来源

2010-07-08 UXdesigner

可以实现 “粘页脚” 单独CSS，这将允许残疾人JS浏览器获得相同的浏览体验。 – 2010-07-08 15:29:01

您是否尝试过在一个在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

来源

2010-07-08 15:32:06

那个很酷，但页脚'移动'，我不希望它在我移动页面时'移动'或滑动，这是错误的！ – UXdesigner 2010-07-08 15:42:22

但这就是使用JS风格粘页脚的全部原因......所以它会随着滚动而移动。如果你想要一个固定的页脚，那么你就纯粹的CSS – 2010-07-08 15:54:21

一个纯粹的CSS解决方案是在我的其他答案。 – 2010-07-08 16:09:13

我建议您尝试CSS的唯一解决方案link。这将在禁用javascript的浏览器上运行。

来源

2010-07-08 15:41:06

正如我在我的帖子中提到的...我尝试过那个，但它不适合我。我不知道使用.NET/IIS是否与代码的解释有关......但是我不得不为.NET应用程序设计，这是一个痛苦。当我为php/mysql应用程序工作时更方便，方式更简单。 – UXdesigner 2010-07-08 15:44:26

HTML/CSS/JavaScript是客户端，如果客户端代码相同，服务器端语言没有区别。 – 2010-07-08 15:48:16

我也推荐使用CSS解决方案。我们的网站使用“粘性页脚”功能，它适用于我们尝试过的每个浏览器。 http://infinitas.ws - 只是分开源代码，看看我们做了什么。 – 2010-07-08 15:53:15

下面是我们如何做了our CSS唯一的解决办法

标记

<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-08 16:02:26

注意“footer”是如何在“wrapper”之外的。本质上，它是布局其余部分之外的一个完全独立的元素。 – 2010-07-08 16:19:01

粘滞页脚在Safari和Chrome上无法正常工作

回答

相关问题