Chrome добавляет пробел в конец страницы после JQuery slideToggle

Question

Я создал эффект всплывающего нижнего колонтитула с помощью jquery для www.brunodejonghe.be .

Работает в FF, Safari, IE7 + и Opera. Когда я открываю нижний колонтитул в Google Chrome, под нижний колонтитул добавляется пробел.

Кто-нибудь знает, что я могу с этим поделать?

спасибо заранее!

JQuery-скрипт:

$('#contact').click(function() {
   <!-- show panel -->
   $("#contactpanel").slideToggle(1500);

   if ($activated == 1) {   
      $('#contact').html("<h4>Contacteer me</h4>");
      $('#contactpanel').css('height', $('#contactpanel').height() + 'px');
      $activated = 0;
   }
   else {
      $('#contact').html("<h4>Verberg</h4>");
      // fluid toggle
      $('#contactpanel').css('height', $('#contactpanel').height() + 'px');
      // scroll to bottom page for pop up footer effect 

      // detect opera and fix scroll bug 
      if ($.browser.opera == true)
      {
         $('html').animate({
            scrollTop:  $(document).height() -  $('#contactpanel').height() + 'px'
           }, 1500);
         $activated = 1;
      }
      else {
         $('html, body').animate({
            scrollTop: $(document).height() -  $('#contactpanel').height() + 'px'
         }, 1500);
         $activated = 1;
      }
   }
});

Answer 1

Помещение overflow:hidden; в footer div и удаление height:75px; из #footer и #footer, .push решает проблему для меня.

Тем не менее, я бы предложил совершенно другое решение. Вместо того, чтобы анимировать сдвиг с помощью JavaScript, я бы предложил создать простой переход. Что-то вроде следующего (непроверенного) кода:

CSS:

#contactpanel {
  overflow: hidden;
  max-height: 0px;
  -webkit-transition: max-height 1s ease;
  -moz-transition: max-height 1s ease;
  ... /* and so on... */
}
#contactpanel.visible {
  max-height: 300px; /* Or so... */
}

JavaScript:

var contact = document.getElementById('contact');
var panel = document.getElementById('contactpanel');
contact.addEventListener('click', function(e) {
  panel.classList.toggle('visible');
});

Посмотрите на http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/, чтобы найти достойное объяснение того, как переходы работают и как они могут сделать вашу жизнь немного проще. :)