Липкий нижний колонтитул плохо работает в Safari и Chrome - PullRequest
Новая
       6

Липкий нижний колонтитул плохо работает в Safari и Chrome

0 голосов
/ 08 июля 2010

Что может происходить в этом случае?Это очень хороший веб-сайт .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>

Ответы [ 3 ]

1 голос
/ 08 июля 2010

Я рекомендую попробовать решение только для CSS ссылка . Это будет работать в браузерах с отключенным JavaScript.

1 голос
/ 08 июля 2010

Вот как мы это сделали наше CSS ONLY решение

Разметка 

<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 голосов
/ 08 июля 2010

Вы пробовали один на CSS-хитрости?

Разметка 

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

1008 * 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...