屏幕闪烁和窗口调整大小调整大小

Question

请参阅此jsFiddle以供参考：(jsFiddle) Div Resizing [查看我遇到的问题，调整结果窗格的大小]

以下是此示例的jQuery代码：

function resizeRightLeftDivs() {
    $('div.left, div.right').css('height',
                                 $('div.container').outerHeight(false) -
                                 $('div.header').outerHeight(false));
    $('div.left').css('width',
                      $('div.container').outerWidth(false) -
                      $('div.right').outerWidth(false));
}

$(document).ready(function() {
    resizeRightLeftDivs();

    $(window).resize(function() {
        resizeRightLeftDivs();
    });
});

从小提琴和我的代码中可以看出，我在这里尝试做的是在调整浏览器窗口大小时适当调整<div />元素的大小。

但由于某些原因，FireFox存在极端闪烁现象。更不用说左半部分没有正确调整大小的时间（左右div之间有差距）。

在IE浏览器中，它太大了一个像素而且div并不是并排坐着。

如何防止这种闪烁和间隙（FireFox）？当浏览器窗口大小发生变化时，这甚至是调整元素大小的最佳方法吗？

Answer 1

我弄清楚造成这个问题的原因。事实证明，差距来自滚动条出现然后消失。解决方案是隐藏滚动条。

解决方案

body {
    overflow: hidden;
}