0

この場合、何が起こっているのでしょうか? とても素敵な .NET Web サイトですが、Safari や Chrome で Web サイトを確認すると、フッターがうまく機能しないことがあり、適切な場所に収まるようにページをスクロール (スクロール バーを移動) する必要があります。それは非常に奇妙なことです。

これは私が使用しているスティッキー フッター プラグインです。

私はすでに他の 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>
4

3 に答える 3

1

CSSのみのソリューションリンクを試すことをお勧めします。これは、JavaScriptが無効になっているブラウザで機能します。

于 2010-07-08T15:41:06.960 に答える
1

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-08T16:02:26.283 に答える
0

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)

});

デモリンク

于 2010-07-08T15:32:06.787 に答える