jquery - Big gap after footer in IE

Question

The page is divided for two parts:

1. Big 100% browser height header
2. Main content and footer

You can see only one of these parts in the browser. I write this code that works fine in Firefox and Chrome:

    var $header = $('.mainHeader');
    var $main = $('.main');
    var $footer = $('.mainFooter')
    var $body = $('body');

    $('#tosite').on('click', function(e){
        $body.css({overflow: 'auto'});
        $main.show();
        $footer.show();
        $([$header, $main, $footer]).each(function(n){
            var $this = $(this);
            $this.animate({top: -$window.outerHeight()}, 400, 'linear', function(){
                if (n == 0) {
                    $this.hide();
                }
                $this.css({top:0});
                $this.css('position', 'relative');
            });
        });
        e.preventDefault();
        return false;
    });

    $('#back').on('click', function(e){
        $body.css({overflow: 'hidden'});
        $([$header, $main, $footer]).each(function(n){
            var $this = $(this);
            $this.css({top: -$window.outerHeight()}).show();
            $this.animate({top: 0}, 400, 'linear', function(){
                if (n > 0) {
                    $this.hide();
                }
            });
        });

        e.preventDefault();
        return false;
    });

But in IE there is a big gap after footer for 100% height of the browser. It disappears with every window resize. Looks like a IE bug. Is there a solution?

Answer 1

IE 喜欢错误地计算高度，例如它有时不喜欢由脚本设置高度的块或带有图像的块。结果，它呈现不正确。我遇到了一个粘页脚的问题：除了 IE8、9、10 之外，每个浏览器都正确。它们在页脚之后渲染了一个间隙，在调整窗口大小后它消失了。

我找不到任何 css 解决方案，因为似乎每种情况都没有明显的原因，所以我只是在所有脚本完成移动后强制重新渲染（在调整大小时发生）。其中一种方法：在 css 中将 body 的 padding-top 设置为 1px （或任何值），并使用脚本将其更改为零（或您需要的任何值，但不一样）。

Answer 2

可能我找到了解决方案。我只是添加position: absolute到身体，现在没关系。