Question

该页面分为两部分：

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的bug。有解决方案吗？

Answer 1

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

我找不到任何css解决方案，因为似乎并不是每个案例的明显原因，所以我只是强制重新渲染（在调整大小时会发生）之后脚本已经采取了行动。其中一种方法：使用脚本将主体的填充顶部设置为1px（或任何值）并将其更改为零（或任何您需要但不相同的内容）。

Answer 2

可能我找到了解决方案。我只需将position: absolute添加到正文，现在就可以了。

在IE中页脚之后的差距很大

2 个答案: