粘性页脚在 Safari 和 Chrome 上效果不佳

发布于 2024-09-09 00:48:39 字数 1512 浏览 12 评论 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>

原文

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 < $(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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

从来不烧饼 2024-09-16 00:48:39

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

回复收藏 0 原文

念﹏祤嫣 2024-09-16 00:48:39

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

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

回复收藏 0 原文

谎言月老 2024-09-16 00:48:39

您是否尝试过 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)

});

演示链接

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

回复收藏 0 原文

~没有更多了~