屏幕闪烁和窗口大小调整错误 Resize

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 有一半的时间没有正确调整大小（左右 div 之间存在间隙）。

在 IE 中它太大了一个像素，divs 不能并排放置。

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

Answer 1

我知道是什么导致了这个问题。事实证明，差距来自滚动条出现然后消失。解决方案是隐藏滚动条。

解决方案

body {
    overflow: hidden;
}