IE页脚后的大间隙答案

【问题标题】：Big gap after footer in IEIE页脚后的大间隙
【发布时间】：2013-05-23 06:42:02
【问题描述】：

页面分为两部分：

100% 浏览器高度大标题
主要内容和页脚

您在浏览器中只能看到其中一个部分。我编写的这段代码在 Firefox 和 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;
    });

但在 IE 中，在浏览器的 100% 高度的页脚之后有一个很大的间隙。 每次调整窗口大小时它都会消失。看起来像一个 IE 错误。有解决办法吗？

【问题讨论】：

IE10 和浏览器模式 7-9 所以我认为每个版本。

标签： jquery html css internet-explorer footer

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

可能我找到了解决方案。我只是将position: absolute 添加到body，现在可以了。

【讨论】：